jQuery - Slide a Line of Text Open and Closed (Left and Right)

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

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

#item {margin-left: 1开发者_如何学Go00px;}

<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?

---

   $(".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/

---

I think perhaps you want

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

instead of

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

Notice that inside the mouseover() method, we're using $(this) to target just the single element that was moused over, rather than every element with class item.