0

我制作了一个简单的插件，它只是为 div 添加了翻转效果。当我们将鼠标悬停在一个 div 上时，我们会翻转 div，但是当我们将鼠标悬停回来时，我们会再次翻转！

我通过在 jQuery 中添加return: false第二个参数函数来解决这个问题。hover()

我的问题是，有没有更好的方法来停止徘徊？

JS：

$.fn.jflip = function(bgimage) {
    var img = bgimage;
    this.hover(function(){
        $(".fake").animate({
            top: '+=200px'
        }, 500);
        $(".fake1").animate({
            top: '-=200px'
        }, 500);
        $(".fake").delay(300).animate({
            top: '-=200px'
        }, 500);
        $(".fake1").delay(300).animate({
            top: '+=200px'
        }, 500);
    }, function(){
        return false;
    });
}

HTML + CSS：

.flipper {
    background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSMMSb5XY_fztmTj2rSwFNn-nw2zxId1ZJLnuFfy39Rk-g2fHZ1) no-repeat;
    background-size: 98% 98%;
    background-position: 4px 4px;
    width: 400px;
    height: 400px;
    background-color: #eee;             
}
.fake {
    position: relative;
    top: -200px; left: 0;
    height: 200px;
    width: 400px;
    background-color: white;
}
.fake1 {
    position: relative;
    top: 200px; left: 0;
    height: 200px;
    width: 400px;
    background-color: white;
}

<body>
    <div class="flipper">
        <div class="fake" /></div>
    <div class="fake1" />
</body>

小提琴（有问题）。

小提琴（有解决方法）。

有更好的方法吗？或者是唯一的方法吗？

谢谢你的帮助。

4

1 回答 1

1

.hover()( docs ) 是.on( 'mouseenter' )and的简写.on( 'mouseleave' )。只需将 mouseenter 事件绑定到.on( 'mouseenter' ).

您的代码将是：

$.fn.jflip = function(bgimage) {
    var img = bgimage;
    this.on( 'mouseenter', function(){
        $(".fake").animate({
            top: '+=200px'
        }, 500);
        $(".fake1").animate({
            top: '-=200px'
        }, 500);
        $(".fake").delay(300).animate({
            top: '-=200px'
        }, 500);
        $(".fake1").delay(300).animate({
            top: '+=200px'
        }, 500);
    }
  });
}
于 2013-07-06T15:39:16.417 回答