Question

我知道有一种更简单的方法可以实现我在这里所做的事情，重复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可以具有相同的类名，但是当它们执行时，它们都会在悬停时执行此操作，而不是悬停在其上的特定div。我基本上想知道如何只有悬停的div执行动作，而同一类的剩余div则什么都不做。

谢谢！

Answer 1

您的问题标题询问在制作动画时更改z-index。但你的描述没有任何关于它的问题。你想做什么？

这是一些合并的代码。

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

Answer 2

请使用$（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);
        });
});

http://jsfiddle.net/PfLaG/1/

Jquery - 动画然后更改z-index然后动画下来

2 个答案: