文章/答案/技术大牛

发布

社区首页 >问答首页 >为什么这个悬停动画不停止？

问为什么这个悬停动画不停止？
EN

Stack Overflow用户

提问于 2010-11-02 07:48:48

回答 2查看 80关注 0票数 5

我正在创建一个示例，其中我们将有四个块，当有人在这个块上滑动显示它背后的内容时，当鼠标退出事件发生时，它就会滑落下来。我就是这样做的：

http://jsbin.com/oluqu4

    $(".garage span").hover(function(){  
          $(this).animate({'height':'0px'},1000);  
          //$(this).clearQueue().animate({'height':'0px'},1500);  
               }, function() {                   
            $(this).animate({'height':'100px'},1000);
    //$(this).clearQueue().animate({'height':'100px'},1500);
            });

 <ul class="garage">
    <li id="shutter1"><span>1</span></li>
    <li id="shutter2"><span>2</span></li>
    <li id="shutter3"><span>3</span></li>
    <li id="shutter4"><span>4</span></li>    
  </ul>

问题是动画不愿停止。原因是当滑块滑动时，它会自动触发鼠标退出事件，但是如何阻止它呢？

另外，让我知道，如果我应该为它提出另一个问题，我想有一些文字的跨度。我不是很好的css，所以请帮助我在这方面。

jquery

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2010-11-02 08:01:22

$(".garage li").hover(function(){  
  $("span", this).animate({'height':'0px'},1000);  
       }, function() {                   
         $("span", this).animate({'height':'100px'},1000);
    });

票数 4

Stack Overflow用户

发布于 2010-11-02 08:00:48

你应该把悬停放在Li元素上，而不是跨度上。这样，即使跨度缩小，你的模式仍然在黎族地区。只要确保你的李有一个高度，留出空间，鼠标有一个悬停区域后，跨度缩小。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/4075769

复制

相似问题

问为什么这个悬停动画不停止？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么这个悬停动画不停止？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么这个悬停动画不停止？
EN