Question

我正在创建一个样本，其中我们将有四个块，当有人鼠标悬停在块上时，它将向上滑动以显示其后面的内容，当mouseout事件发生时它将向下滑动。这就是我所做的：

    $(".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);
            });

HTML

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

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

另外，让我知道如果我应该为它创建另一个问题，我想在跨度背后有一些文字。我不擅长CSS，所以请帮助我这样做。

Answer 1

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

Answer 2

您应该将鼠标悬停在Li元素而不是跨度上。这样，即使跨度已经退缩，您的模式仍然会在Li区域上方。只需确保你的李的高度为鼠标在跨度缩小后留出悬停区域留出空间。

为什么这个onhover动画没有停止？

2 个答案: