Question

使用Flip!插件或similar one，我正在尝试创建一个在鼠标悬停时翻转的简单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;
}

的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翻了一次，然后拒绝删除“翻转”课程，尽管说它有在这一点上，我很困惑，迷失了。我只想让我的div翻转。请帮忙。

Answer 1

在执行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);
});

使用jQuery在鼠标悬停时翻转面板

1 个答案: