How do I accomplish a sliding transition effect for HTML text elements?

Question

I am looking to create an HTML page where <p> tags can be interacted with based on mouse clicks. I am looking to incorporate horizontal-sliding transitions with ease-in/ease-out, like those in deck.js or timeline.js for some of these <p> tags.

Beyond digging in the deck.js and timeline.js code (which has been pretty fruitless thus far), can someone recommend a tutorial or example for accomplishing this effect for text? My google-fu has only pointed me to very specific examples for image slide decks.

Wanna give us an update or choose a correct answer here? – Rice_Crisp Mar 22 '13 at 20:37 — Rice_Crisp, Mar 22 '13 at 20:37

Rice_Crisp · Answer 1 · 2013-03-21T16:44:54.830

0

put it in a div and then:

$(document).ready(function(){
  $("div").click(function(){
    $("div").animate({
      right:'250px',
    });
  });
});

or whatever way you want to move it you can look up all the effects at w3schools

http://w3schools.com/jquery/jquery_animate.asp

edited Mar 21 '13 at 16:44

answered Mar 21 '13 at 16:32

Rice_Crisp

1,242
1
16
33

No programming hipster. The site posted makes a good point on why not using w3schools. Please look ar it. You might desagree of course – Ateszki Mar 21 '13 at 17:28
Well I disagree. For a beginners programming supplement and a general source of low-level reference, it's better than any other site. – Rice_Crisp Mar 21 '13 at 17:32

score 0 · Accepted Answer · edited May 23 '17 at 12:04

0

I think this question could help you out Sliding divs horizontally with JQuery .Remember that <p> tags can be moved as div so I think you won't have issues. If I'm wrong, tell me.

edited May 23 '17 at 12:04

Community

1
1

answered Mar 21 '13 at 16:50

steo

4,586
2
33
64

How do I accomplish a sliding transition effect for HTML text elements?

2 Answers2