使用jQuery在鼠標懸停時翻轉面板

使用Flip!插件或similar one，我試圖創建一個簡單的div，在鼠標懸停時翻轉，並在鼠標離開時翻轉。我已經創建了一個簡單的網頁概念證明，但我似乎無法讓它工作。如果以最簡單的方式實現（mouseenter：flip（），mouseleave：revertFlip（）），則在鼠標移動時，div會重複翻轉。通過一些工作，我可以簡單地實現它，但是如果在動畫完成之前將鼠標移開，則會出現問題。經過多次實驗，我的代碼看起來如此;使用jQuery在鼠標懸停時翻轉面板

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <title> Test </title> 
     <link rel='stylesheet' type='text/css' href='stylesheet.css'/> 
     <script src="jquery.js"></script> 
     <script src='jquery-ui\jquery-1.9.1.js'></script> 
     <script src='jquery-ui\ui\jquery-ui.js'></script> 
     <script src='jquery.flip.js'> </script> 
     <script type='text/javascript' src='script.js'></script> 
    </head> 
    <body> 
     <div class="flipper"><div class="panel">Not flipped!</div></div> 
    </body> 
</html>

CSS：

div {display:inline-block;} 

.panel { 
    width: 200px; 
    height: 80px; 
    text-align: center; 
    color: white; 
    background-color: red; 
    padding-top: 20px; 
    padding-bottom:-20px; 
} 

.flipper{ 
    border: 1px dashed blue; 
}

的javaScript：

$(document).ready(function(){ 
    $('.flipper').mouseenter(function(){ 
     console.log('--Mouse Entered--'); 
     console.log('NOT flipped ' + !($(this).children().hasClass('flipped'))); 
     console.log('NOT flip ' + !($(this).children().hasClass('flip'))); 
     if (!($(this).children().hasClass('flipped')) && !($(this).children().hasClass('flip'))) { 
      console.log('If evaluated') 
      $(this).children().addClass('flip'); 
      console.log('Added flip') 
      $(this).children().flip({ 
       direction: 'lr', 
       content: 'Flipped!', 
       color: 'blue', 
       speed: 1000, 
       onEnd: function(){ 
        console.log('Ended. Removed flip, added flipped'); 
        $(this).children().removeClass('flip'); 
        $(this).children().addClass('flipped'); 
        console.log('Does it have flip ' + $(this).children().hasClass('flip')) 
       } 
      }); 
     }; 
    }); 
    $('.flipper').mouseleave(function(){ 
     console.log('--Mouse left--'); 
     if ($(this).children().hasClass('flipped')) { 
     $(this).children().flip({ 
      direction: 'rl', 
      content: 'Not flipped!', 
      color: 'red', 
      speed: 100 
     }); 
     $(this).children().removeClass('flipped'); 
     console.log('Removed flipped') 
     } 

    }); 
    $('.flipper').click(function(){ 
     console.log('DEBUG classes "' + $(this).children().attr('class') + '"'); 
    }); 
});

目前，DIV FL ips曾經，然後拒絕刪除'翻轉'類，儘管說它已經。
在這一點上，我很困惑和迷失。我只想讓我的翻轉。請幫忙。

來源

2013-07-28 Legomaniack

您必須使用JQuery Timing API等待mouseenter函數在執行mouseout函數之前完成。

或者你也可以做這樣的事情，等待2秒鐘讓mouseout函數執行。

$('.flipper').mouseout(function(){ 
    var t = setTimeout(function() { 
    console.log('--Mouse left--'); 
     if ($('.flipper').children().hasClass('flipped')) { 

      $(this).children().flip({ 
        direction: 'rl', 
        content: 'Not flipped!', 
        color: 'red', 
        speed: 100 
      }); 
      $('.flipper').children().removeClass('flipped'); 
      $('.flipper').children().removeClass('flip'); 
      console.log('Removed flipped') 
     } 
    }, 2000); 
});

來源

2013-07-28 18:41:39

哎呦。忘記將鼠標移回mouseleave。應該仍然有效。你能解釋我將如何使用時間.wait（）？我不知道如何實現它。 – Legomaniack

使用jQuery在鼠標懸停時翻轉面板

回答

相關問題