Question

已经问过这个问题的变化，但没有具体说明。

我有多行文字，如下所示：

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

我想要一个jQuery代码，它可以让我在悬停时将文本滑入页面并重新登录。

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

据我所知，这适用于一个项目，但我列出了20或30个这样的术语，并且不希望它们全部移动。我不知道如何迭代它，所以我可以写一次，让它分别为每个项目工作。你能帮忙吗？

Answer 1

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

http://jsfiddle.net/dc47b/

或者你想要这个

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

Answer 2

我想也许你想要

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

而不是

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

请注意，在mouseover（）方法中，我们使用$(this)来定位被鼠标悬停的单个元素，而不是每个具有类item的元素。

jQuery - 滑动一行文本打开和关闭（左和右）

2 个答案: