Question

我有一个酒吧，当盘旋时，它会从蓝色垂直翻转到灰色。离开时，它会变回蓝色。大。

问题
它只会在你处于悬停状态时动画。如果你悬停并且＆＃34; unhover＆＃34;它不会完成动画。非常快。

<强烈>目标
我想让它从蓝色翻转到灰色，然后再回到蓝色，即使是徘徊了一瞬间。你不希望动画在你解开时立即停止。

ATTEMPTS
我已经读过，这不能用纯CSS完成。

我尝试添加以下jquery代码，用于在此问题中添加和删除动画类：css3 animation on :hover; force entire animation：

$(".bar").bind("transitionend webkitTransitionEnd oTransitionEnd", function(){
$(this).removeClass("vFlipper") 
})
$(".bar").hover(function(){
$(this).addClass("vFlipper");
})

将.vFlipper的CSS更改为.bar.vFlipper，但我似乎无法使用我的代码。 UL和LI似乎总是给我带来问题。我理解它如何与DIV一起使用，而不是列表。

FIDDLE
http://jsfiddle.net/zuhloobie/t9x723tq/1/

任何帮助将不胜感激：）

##更新##
我真的很接近这个小提琴：http://jsfiddle.net/zuhloobie/t9x723tq/8/
他虽然有些马车。当您从左侧输入li时，它将变为灰色，但在您退出时不会翻转为蓝色。当您从顶部，右侧或底部输入li时，它在悬停时不会变为灰色，但是当您退出时它将执行整个动画。想法？

Answer 1

您应该尝试这种类型的代码/语法

$(document).ready(function(){
    $('#bar').bind( "click transitionend webkitTransitionEnd oTransitionEnd", function() {
// css for doing flipping will go here;
//  alert( "User clicked on bar" );

});

$('#bar').bind( "click transitionend webkitTransitionEnd oTransitionEnd", function() {
// css for returning/reversing flipper  will go here;
//  alert( "User clicked on bar" );

});

});

离开悬停后完成CSS动画

1 个答案: