Каков лучший способ предотвращения влияния на зависание?

У меня есть простой плагин, который просто добавляет flip-эффект в div. Когда мы наводим верх над div, мы получаем div, но тогда, когда мы возвращаемся назад, мы получаем еще один флип!Каков лучший способ предотвращения влияния на зависание?

Я исправил это, добавив return: false во вторую функцию параметра hover() в jQuery.

Мой вопрос в том, что есть лучший способ остановиться от зависания?

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

Я предлагаю вам сначала узнать, как закрыть HTML теги перед прыжком в манипуляции DOM с JavaScript –

@ RokoC.Buljan мы можем закрыть DIV как < /><- это :) –

@MohammadAreebSiddiqui В правильном html нет самозакрывающихся тегов Div, а ваш тег div с классом «flipper» вообще не закрыт. – Sumurai8

.hover() (docs) является сокращением для .on('mouseenter') и .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-06 15:39:16 Sumurai8

Хорошо! Спасибо .. :) –

Если это ответит на ваш вопрос, я был бы признателен, если бы вы приняли ответ. – Sumurai8

Я принял его перед вашим комментарием! –

Каков лучший способ предотвращения влияния на зависание?

ответ

Смежные вопросы