jquery - 滑动动画只有一个div

Question

我有一个小问题，我想创建一个幻灯片动画。你可以看到我的代码: click here .

但是正如您所见，当我们将鼠标“悬停”在一个 div 上时，所有的 div 都会动画化! 我想:当我们在一个 div 上“鼠标悬停”时，只有这个 div 是动画的，而不是其他的。

$(".button span").mouseover( function() {
$(this).stop().animate({ height:"+5%"}, 500);}); }); $(function() {

$(".button").mouseout( function(){
$(".button span").stop().animate({ height:"150px"}, 500);});

$(".button").mouseover( function(){
$(".button span").stop().animate({ height:"+5%"}, 500);});

感谢您宝贵的帮助。

Answer 1

您需要使用this 作为选择跨度的上下文:

http://jsfiddle.net/TKcSU/

$(function () {
    $(".button").mouseout(function () {
        $('span', this).stop().animate({
            height: "150px"
        }, 500);
    });

    $(".button").mouseover(function () {
        $('span', this).stop().animate({
            height: "+5%"
        }, 500);
    });
});

替代方案是 $(this).find('span') 或 $(this).children('span');