使用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在鼠标悬停时翻转面板

回答

相关问题