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

发布于 2024-12-02 03:56:15 字数 556 浏览 1 评论 0原文

已经提出了关于这个问题的各种变体，但不是特别提出这个问题。

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

#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 个此类术语的列表，并且不希望它们全部移动。我不知道如何迭代它，所以我可以编写一次并让它分别为每个项目工作。你能帮忙吗？

原文

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

烏雲後面有陽光 2024-12-09 03:56:16

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

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

回复收藏 0 原文

救星 2024-12-09 03:56:16

我想也许您想要的

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

不是

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

Notice that inside mouseover() 方法，我们使用 $(this) 来定位鼠标悬停的单个元素，而不是类 项目。

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.

回复收藏 0 原文

~没有更多了~