Question

Variations on this question have been asked, but not this specifically.

I have a number of lines of text, like below:

#item {margin-left: 100px;}

<div class="item">Happy to Know You.</div>
<div class="item">Glad to Know You.</div>
<div class="item">Sad to Know You.</div>

I want a jQuery code that will let me slide the text out into the page and back in, on hover.

   $(".item").mouseover(function(){
     $(".item").animate({"marginLeft": "-=100px"}, "slow");
        });

As far as I can tell, this works well for one item, but I have a list of 20 or 30 such terms and don’t want them all to move. I don’t know how to iterate it so I can write it once and have it work for each item separately. Can you help?

Answer 1

   $(".item").mouseenter(function(e){
       e.stopPropagation();
     $(this).stop(true,true).animate({"marginLeft": "-=100px"}, "slow");
        });

http://jsfiddle.net/dc47b/

or maybe you want this

   $(".item").hover(
   function(e){
        e.stopPropagation();
        $(this).stop(true,true).animate({"marginLeft": "-=100px"}, "slow");
   },
   function(){
       $(this).stop(true,true).animate({"marginLeft": "+=100px"}, "slow");
   });

http://jsfiddle.net/dc47b/2/