1

使用翻转！插件或类似的，我正在尝试创建一个简单的 div，它会在鼠标悬停时翻转，并在鼠标离开后翻转回来。我创建了一个简单的概念验证网页，但我似乎无法让它工作。如果以最简单的方式实现（mouseenter:flip(),mouseleave:revertFlip()），当鼠标移动时，div 会反复翻转。通过一些工作，我可以让它简单地工作，但是如果你在动画完成之前将鼠标移开，它就会卡住。经过大量实验，我的代码看起来像这样；

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;
}

脚本：

$(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 翻转一次，然后拒绝删除 'flip' 类，尽管说它有。
在这一点上，我非常困惑和迷失。我只想让我的 div 翻转。请帮忙。

4

1 回答 1

0

在执行 mouseout 函数之前，您必须使用JQuery Timing API等待 mouseenter 函数完成。

或者您也可以执行类似的操作以等待 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-28T18:41:39.927 回答