我正在创建一个样例,其中有四个方块。当有人鼠标悬停在方块上时,它会向上滑动,显示其后面的内容;当鼠标离开时,它会向下滑动。这是我所做的:
问题是动画不愿意停止。原因是当块向上滑动时,它会自动触发mouseout事件,但如何停止呢?
另外,请告诉我是否应该为此创建另一个问题,我想在span后面添加一些文本。我不擅长css,所以请帮我完成这个任务。
$(".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事件,但如何停止呢?
另外,请告诉我是否应该为此创建另一个问题,我想在span后面添加一些文本。我不擅长css,所以请帮我完成这个任务。