是否可以撤消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
的班级并不会导致其子女的风格转变?
答案 0 :(得分:1)
这是我最接近它的工作:
示例: 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;});
}
}
);
答案 1 :(得分:0)
慢慢获得课程是没有意义的。元素要么具有特定的类,要么没有,并且CSS无法在类中指示某种“部分包含”。
编辑 - @patrick指出jQuery UI确实支持这一点,至少在某种程度上如此。如果你安装效果的东西,类操作函数需要持续时间参数。
答案 2 :(得分:0)
看起来你正在寻找jQuery的某种形式的.animate函数。
$('#clickme').hover(function() {
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 5000, function() {
// Animation complete.
});
});
否则,慢慢切换课程对我来说没什么意义