jQuery switchClass

时间:2010-06-14 18:30:19

标签: jquery animation jquery-effects

是否可以撤消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的班级并不会导致其子女的风格转变?

EDIT2:

是的,那个'固定'了它。现在可以在它的所有荣耀中观察到真正的错误(在中间状态下被冻结)。

3 个答案:

答案 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. }); });

否则,慢慢切换课程对我来说没什么意义