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处理程序中为mouseenter处理程序定义了一个var前面的var，为后面定义了一个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
  })
})

jQuery只需要悬停一次影响一个图像

3 个答案: