0

jQuery を複製して 3 つの個別の 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 が何もしないようにする方法を考えています。

ありがとう！

4

2 に答える 2

0

実際にホバリングした要素には $(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/

于 2013-05-23T16:41:39.960 に答える
0

質問のタイトルは、アニメーション中の 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);
}
于 2013-05-23T16:38:34.763 に答える