是否可以撤消 switchClass
转换?
我希望当您将鼠标悬停在某个元素上时,该元素会慢慢获得 A 类,并在鼠标移开后再次慢慢失去它。但是,该函数似乎有问题,并且调用 .stop(0,1)
似乎没有帮助。事实上,它似乎打破了它。
我有一个活生生的例子here 。是的,这是一个 404 页面,但这并不重要。导航应该慢慢地获得或失去一个等级,但它只是跳跃。该脚本可以在 here 找到.
这样的转变可能吗?
编辑:
这是我正在使用的代码:
$('#navbar li:not(.current) a').hover(function() {
$(this).parent()
.stop(1,0)
.addClass('current', 1000);
}, function () {
$(this).parent()
.stop(1,0)
.removeClass('current', 1000);
});
是否可能是因为更改 li
的类不会导致其子级的样式发生转换?
编辑2:
是的,这“解决”了它。现在可以观察到真正的错误(在中间状态下被卡住)。
最佳答案
这是我最接近让它发挥作用的一次:
示例: http://jsfiddle.net/TUrvP/
可能有些矫枉过正,您也许可以使用 :animated
选择器,尽管我一开始遇到了麻烦。
可能不值得付出努力...
HTML
<div id='myElement' class='blue'>content</div>
CSS
div {
width: 100px;
height: 100px;
}
.blue {
background: blue;
position:relative;
left: 20px;
}
.myClass {
background:red;
margin-top: 50px;
}
jQuery
var animating = false;
var interval;
$('#myElement').hover(
function() {
var $th = $(this);
if(!animating && !interval) {
$th.clearQueue();
animating = true;
$th.addClass('myClass',500,function() {animating=false;});
}
},
function() {
var $th = $(this);
if(interval) return false;
if(animating) {
interval = setInterval(function() {
if(!animating) {
$th.clearQueue();
animating = true;
$th.removeClass('myClass',500, function(){animating = false;});
clearInterval(interval);
interval = null;
}},50)
} else {
$th.clearQueue();
$th.removeClass('myClass',500, function(){animating = false;});
}
}
);
关于jQuery switchClass,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3039834/