Jquery-向上设置动画,然后更改z索引,然后向下设置动画

Jquery-向上设置动画,然后更改z索引,然后向下设置动画,jquery,hover,jquery-animate,Jquery,Hover,Jquery Animate,我知道有一种更简单的方法可以实现我在这里所做的事情,而不必复制jQuery并针对三个单独的div: $(function() { var $foo = $('.img-spot-wrap-1'); $foo.hover(function() { clearTimeout($foo.t); $foo.stop().animate({top: '-40px', height: 210} ,{duration:30

我知道有一种更简单的方法可以实现我在这里所做的事情,而不必复制jQuery并针对三个单独的div:

    $(function() {
    var $foo = $('.img-spot-wrap-1');
    $foo.hover(function() {
                clearTimeout($foo.t);
                $foo.stop().animate({top: '-40px', height: 210} ,{duration:300}).animate({top: '0px'} ,{duration:300});
            }, function(){
                $foo.t = setTimeout((function() {
                    $foo.stop().animate({top: '-40px'} ,{duration:300}).animate({top: '0px', height: 170} ,{duration:300});
                }), 200);
        });
});

$(function() {
    var $foo = $('.img-spot-wrap-2');
    $foo.hover(function() {
                clearTimeout($foo.t);
                $foo.stop().animate({top: '-40px', height: 210} ,{duration:300}).animate({top: '0px'} ,{duration:300});
            }, function(){
                $foo.t = setTimeout((function() {
                    $foo.stop().animate({top: '-40px'} ,{duration:300}).animate({top: '0px', height: 170} ,{duration:300});
                }), 200);
        });
});

$(function() {
    var $foo = $('.img-spot-wrap-3');
    $foo.hover(function() {
                clearTimeout($foo.t);
                $foo.stop().animate({top: '-40px', height: 210} ,{duration:300}).animate({top: '0px'} ,{duration:300});
            }, function(){
                $foo.t = setTimeout((function() {
                    $foo.stop().animate({top: '-40px'} ,{duration:300}).animate({top: '0px', height: 170} ,{duration:300});
                }), 200);
        });
});
每个div可以有相同的类名,但当它们都在hover上执行此操作时,它们都会在hover上执行此操作,而不是在hover上执行特定的div。我基本上在想,我怎么能只让悬停的div执行操作,而同一个类的其余div什么也不做


谢谢

您的问题标题询问如何在设置动画时更改z索引。但你的描述并没有提出任何问题。你想做什么

下面是一些需要整合的代码

$('.oneClassName').hover(function(){
    clearTimeout(timeout);
    $(this).stop().animate({top: '-40px', height: 210}, 300).animate({top: '0px'}, 300);
}, function() {
    var timeout = setTimeout(function(){
        $(this).stop().animate({top: '-40px'}, 300).animate({top: '0px', height: 170}, 300);
    }, 200);
}
请对实际悬停的元素使用$(this):

$(function() {
    var $foo = $('.img-spot-wrap-3');
    $foo.hover(function() {
                clearTimeout($(this).t);
                $(this).stop().animate({top: '-40px', height: 210} ,{duration:300}).animate({top: '0px'} ,{duration:300});
            }, function(){
                $(this).t = setTimeout((function() {
                    $(this).stop().animate({top: '-40px'} ,{duration:300}).animate({top: '0px', height: 170} ,{duration:300});
                }), 200);
        });
});

您需要查看
$(此)
。它将帮助您为单个类创建一个函数,该函数只对您正在处理的类有效。我将尝试提交一些代码在再次阅读标题后,我可以看到它实际上与我的问题无关。我很抱歉,但谢谢你,“这”是丢失的链接!