Jquery - 向上动画然后更改z-index然后动画向下答案

【问题标题】：Jquery - Animate up then change z-index then animate downJquery - 向上动画然后更改z-index然后动画向下
【发布时间】：2013-05-23 16:31:09
【问题描述】：

我知道有一种更简单的方法可以实现我在这里所做的事情，而无需复制 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 什么都不做。

谢谢！

【问题讨论】：

你需要查看$(this)。它将帮助您为单个类创建一个仅适用于您正在处理的类的函数。我会尝试提交一些代码

标签： jquery hover jquery-animate

【解决方案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);
}

【讨论】：

再次阅读标题后，我可以看到它实际上与我的问题无关。我很抱歉，但谢谢你，“这个”是缺少的链接！

【解决方案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/

【讨论】：