jQuery一次只需要悬停影响一张图片

Question

我将有一些图像，正面是图片，背面是信息。我将它设置为在悬停时翻转，但翻转一个似乎也会翻转另一个（在这个例子中，我只使用了两个正面黑色和背面蓝色的图像）

如何更改代码以使其仅翻转鼠标悬停的一张图像？

脚本

$(document).ready(function(){
    var margin=$('.front').width()/2;
    var width=$('.front').width();
    var height=$('.front').height();

    $('.back').stop().css({width:'0px',height:''+height+'px',
                           marginLeft:''+margin+'px',opacity:'0.5'});

    $('.front').hover(function(){
        $(this).stop().animate({width:'0px',height:''+height+'px',
                                marginLeft:''+margin+'px',opacity:'0.5'},
                               {duration:500});
        window.setTimeout(function() {
            $('.back').stop().animate({width:''+width+'px',height:''+height+'px',
                                       marginLeft:'0px',opacity:'1'},
                                      {duration:500});
        },500);
    });

    $('.back').hover(function(){
        $(this).stop().animate({width:'0px',height:''+height+'px',
                                marginLeft:''+margin+'px',opacity:'0.5'},
                               {duration:500});
        window.setTimeout(function() {
            $('.front').stop().animate({width:''+width+'px',height:''+height+'px',
                                        marginLeft:'0px',opacity:'1'},
                                       {duration:500});
        },500);
    });
});

标记：

<div id="container">
    <img class="front" id="image1" src="images/front_image.png" alt="" />
    <img class="back" id="image2" src="images/back_image.png" alt="" />
</div>

<div id="container">
    <img class="front" id="image3" src="images/front_image.png" alt="" />
    <img class="back" id="image4" src="images/back_image.png" alt="" />
</div>

CSS：

#container {position: relative; width: 140px; height: 200px; display: inline-block;}
.front {position: absolute; cursor: pointer;}
.back {display: none; position: absolute; cursor: pointer;}

Answer 1

问题在于，在您的setTimeout 调用中，您正在为班级中的所有内容设置动画。您只需要为悬停的对象设置动画。您需要为每个图像对分配一个唯一的类，然后在悬停功能期间获取唯一的类。也许是这样的：

HTML：

<img class="front card1" id="image1"...
<img class="back card1" id="image2"...

Javascript：

$('.front').hover(function(){
    ...
    var cardClass = $(this).attr('class').match(/card\d/);
    window.setTimeout(function() {
        $('.back.' + cardClass).stop().animate...
        ...
    }

Answer 2

正如有人在评论中指出的那样，您可能需要考虑使用 css 来完成此操作，因为它更简洁。但是，要修复此 javascript，我认为您应该考虑将方法从使用 window.SetTimeout() 更改为使用悬停方法的两个处理程序。 hover方法有两个参数：

.hover( handlerIn(eventObject), handlerOut(eventObject) )

这些只是 mouseenter/mouseleave 事件的快捷方式。您还需要将变量定义为函数中的适当范围。与此类似，我在 mouseenter 处理程序中为 front 定义了一个 var，在 mouseleave 处理程序中为 back 定义了一个 var。两者都在各自的完整功能中使用。要获得正确的正面和背面图像，您需要使用相对选择器。在这种情况下，我使用了 div 的子级。最后，为了避免后面的图像“卡住”，我在动画之前调用了 stop，并且在每个事件处理程序中开始第一个动画之前调用了相反的图像。这是代码（original fiddle 或 updated fiddle）：

css

.container {
    position: relative;
    width: 200px;
    height: 200px;
    display: inline-block;
    /*border: 1px solid black;*/
}
.front {
    position: absolute;
    cursor: pointer;
}
.back {
    /*display: none;*/
    position: absolute;
    cursor: pointer;
}

html

<div class="container">
    <img class="front" src="http://placehold.it/200x200&text=front1" alt="" />
    <img class="back" src="http://placehold.it/200x200&text=back1" alt="" />
</div>
<div class="container">
    <img class="front" src="http://placehold.it/200x200&text=front2" alt="" />
    <img class="back" src="http://placehold.it/200x200&text=back2" alt="" />
</div>
<div class="container">
    <img class="front" src="http://placehold.it/200x200&text=front3" alt="" />
    <img class="back" src="http://placehold.it/200x200&text=back3" alt="" />
</div>
<div class="container">
    <img class="front" src="http://placehold.it/200x200&text=front4" alt="" />
    <img class="back" src="http://placehold.it/200x200&text=back4" alt="" />
</div>

javascript

$(document).ready(function () {
    $('.container').each(function () {
        var front = $(this).children('.front');
        var back = $(this).children('.back');
        var height = front.height();
        var width = front.width();
        var margin = width / 2;

        front.data('w', width);
        front.data('h', height);

        $(this).css({
            width: width + 'px',
            height: height + 'px'
        });

        back.stop().css({
            width: '0px',
            height: '' + height + 'px',
            marginLeft: '' + margin + 'px',
            opacity: '0.5'
        });
    });

    $('.container').hover(function () {
        var back = $(this).children('.back');
        var front = $(this).children('.front');
        var width = front.data('w');
        var height = front.data('h');
        var margin = width / 2;

        back.stop();
        front.stop().animate({
            width: '0px',
            height: height + 'px',
            marginLeft: margin + 'px',
            opacity: '0.5'
        }, 500, function () {
            back.stop().animate({
                width: width + 'px',
                height: height + 'px',
                marginLeft: '0px',
                opacity: '1'
            }, 500);
        });
    },

    function () {
        var front = $(this).children('.front');
        var back = $(this).children('.back');
        var width = front.data('w');
        var height = front.data('h');
        var margin = width / 2;

        front.stop();
        back.stop().animate({
            width: '0px',
            height: height + 'px',
            marginLeft: margin + 'px',
            opacity: '0.5'
        }, 500, function () {
            front.stop().animate({
                width: width + 'px',
                height: height + 'px',
                marginLeft: '0px',
                opacity: '1'
            }, 500);
        });
    });
});

更新：更新了 javascript 以允许任何尺寸的图像。

Answer 3

我尝试像这样使用.each 和$(this)：

$('.front').each(function(){

  $(this).hover(function(){

    Whatever
  })
})