Question

我尝试使用http://lab.smashup.it/flip/中的脚本，因为在我的测试中，它是跨浏览器/操作系统最可靠的。纯CSS 3D转换仅适用于我的测试。

anywho，该脚本似乎是用于点击，我试图通过悬停实现它。

我想要的是将鼠标悬停（或者可能是鼠标中心）而不是DIV＆＃34; A＆＃34;为DIV＆＃34; B＆＃34;翻转。然后，在悬停（或鼠标离开）时，它会翻回原来的DIV＆＃34; A＆＃34;。应该永远工作，hover =＆＃34;翻到B＆＃34;并且hover-off =＆＃34;翻到A＆＃34;。最终，＆＃34; B＆＃34;但如果悬停状态正常，那不应该影响到这里发生的事情。

我让它在一个循环中工作，悬停翻转DIV A到DIV B.当悬停时，DIV B翻转回DIV A.问题是它不能再次工作。 a＆＃34; flag＆＃34;我创建的是为了防止翻转功能在悬停时不连续翻转（不在B上停止）从0开始，然后在第一次悬停旋转后设置为1。在mouseout上，它应该将该标志重置为0并且它似乎在console.log中，但是当我第二次将鼠标悬停在DIV A上时，console.log表示它仍然设置为1，因此，悬停不会在第二/第三/等时间内工作。这可能只是我设置旗帜的问题，我不知道......

这里是一个JSfiddle：http://jsfiddle.net/ypdvrdu9/1/

这是我的CSS：

#flipbox-wrapper {
    position: relative;
    width: 390px;   
    height: 265px;
    border: 2px solid black;
}
#flipbox-over {
    position: absolute; 
    z-index: 2;
    width: 390px;   
    height: 245px;
    /* background: rgba(0, 0, 0, 0.3); */
}
#flipbox-front {
    width: 390px;   
    height: 265px;  
    color: #fff;
    background: green;
}
#flipbox-back {
    display: none;
    width: 390px;   
    height: 265px;  
    color: #fff;
    background: red;
}

这是HTML：

<div id="flipbox-wrapper">
    <div id="flipbox-over"></div>
    <div id="flipbox-front">
        <img src="thumb-03.png"/>
        front
    </div>
    <div id="flipbox-back">
        <img src="thumb-04.png"/>
        back
    </div>
</div>

这是我的自定义JS：

$(document).ready(function() { 

            flipFlag = 0;
            $('#flipbox-over').hover(function() {
                    console.log('mouseenter flipFlag: ' + flipFlag);
                if (flipFlag == 0) {
                    $('#flipbox-front').flip({
                        direction: 'lr',
                        color: 'red',
                        content: $('#flipbox-back'),
                        onEnd: function(){
                            // end
                            flipFlag = 1;
                        }
                    });
                }
            },
              function() {
                // on mouseout function
                if (flipFlag == 1) {
                    $('#flipbox-front').revertFlip();
                    flipFlag = 0;
                }
                    console.log('mouseout flipFlag: ' + flipFlag);
                flipFlag = 0;
            });     

        });

[还需要jQuery和jQuery UI]

这里是JSfiddle：http://jsfiddle.net/ypdvrdu9/1/

任何和所有帮助表示赞赏。我希望这是一个简单的，不会占用太多人的时间。非常感谢！

Answer 1

请参阅jsfiddle：http://jsfiddle.net/ypdvrdu9/2/而不是#flipbox-over我使用#flipbox-front和#flipbox-back因此生成的js：

$(document).ready(function () {
    flipFlag = 0;
    $('#flipbox-front, #flipbox-back').hover(function () {
        console.log('mouseenter flipFlag: ' + flipFlag);
        if (flipFlag == 0) {
            $('#flipbox-front').flip({
                direction: 'lr',
                color: 'red',
                content: $('#flipbox-back'),
                onEnd: function () {
                    // end
                    flipFlag = 1;
                }
            });
        }
    },
        function () {
            // on mouseout function
            if (flipFlag == 1) {
                $('#flipbox-front').revertFlip();
                flipFlag = 0;
            }
            console.log('mouseout flipFlag: ' + flipFlag);
            flipFlag = 0;
        });
});

更新：更好的选择是：http://codepen.io/GreenSock/pen/yzahJ使用tweenLite和tweenmax，它们是http://greensock.com更新的库{3}}

jQuery在悬停时翻转 - 使用标记在悬停时反复运行

1 个答案: