什麼是避免影響懸停的更好方法？

我有一個簡單的插件，只是增加了對div的翻轉效果。當我們將鼠標懸停在div上時，我們會將div翻轉，但當我們將鼠標懸停時，我們會再次翻轉！什麼是避免影響懸停的更好方法？

我修正了在jQuery中hover()的第二個參數函數return: false。

我的問題是，有沒有更好的停止懸停的方法？

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>

Fiddle(with problem).

Fiddle(with workaround).

有沒有更好的方法來做到這一點？或者是唯一的方法呢？

感謝您的幫助。

來源

2013-07-06 Mohammad Areeb Siddiqui

我建議你先學會跳進DOM操作使用JavaScript –

@ RokoC.Buljan我們可以關閉的div像< /><之前關閉HTML標籤 - 這:) –

@MohammadAreebSiddiqui在正確的html中沒有自閉合div標籤，而'flipper'類的div標籤根本沒有關閉。 – Sumurai8

.hover()（docs）是.on('mouseenter')和.on('mouseleave')的簡寫。只需將鼠標事件綁定到.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-06 15:39:16 Sumurai8

好的！謝謝.. :) –

如果這回答你的問題，如果你接受答案，我將不勝感激。 – Sumurai8

我在評論之前接受了它！ –

什麼是避免影響懸停的更好方法？

回答

相關問題