jqueryswitchclass

是否可以撤消

switchClass

转换

我想让一个元素在鼠标悬停在上面时慢慢地获得class

A

，然后在鼠标离开后再次慢慢地丢失它。但是，函数似乎有问题，调用

.stop（0,1）

似乎没有帮助。事实上，它似乎打破了它

我有一个活生生的例子。是的，这是404页，但这并不重要。导航应该缓慢地获得或失去一个类，但它只是跳跃。可以找到脚本

这样的过渡可能吗

编辑： 以下是我使用的代码：

$('#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：

---

是的，这“修复”了它。真正的bug现在可以在它所有的荣耀中被观察到（被冻结在中间状态）。

慢慢地获得一个类是没有意义的。一个元素要么有一个特定的类，要么没有，而CSS并没有提供在类中表示某种“部分包含”的方法

---

edit-@patrick指出jqueryui确实支持这一点，至少在某种程度上是这样。如果你安装了特效工具，类操作函数将使用一个duration参数。

看起来你在寻找jQuery的某种形式的.animate函数

$（'#clickme'）。悬停（函数（）{
$（“#书”）。设置动画({
不透明度：0.25，
左：'+=50'，
高度：“切换”
}，5000，函数（）{
//动画完成。
});
});

否则，慢慢切换类对我来说没有多大意义
这是我最接近于让它工作的一次：

示例：

可能有些过火了，您可以使用
：动画的
选择器，尽管我一开始遇到了麻烦

可能不值得付出努力

HTML

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;});
            }
        }
);

如果安装了jQueryUI，则可以执行此操作。你可以给一个持续时间，它会给类的属性设置动画。@patrick wow，那么它会读取CSS还是什么？真正地那似乎。。。严格地说，如果在一般情况下可能的话，确定语义应该是什么似乎是相当复杂的。如果选择器作用于具有两个类的元素，而您只是对其中一个类设置动画，那该怎么办？我现在必须读一读，因为它听起来很神奇。它真的很神奇，但并不总是很有效。最新版本的UI似乎比前一版本有了很大的改进。不过，我当然不声称自己对内部运作有任何了解o） 这是消除分散在javascript中的CSS值的一种很好的方法。@patrick当然可以-我想它可以做一些事情，比如添加类，检查产生的样式差异，然后设置动画，在转换完成时实际为元素提供类。不确定在没有可见工件的情况下如何实现这一点，但这可能是我不是jQuery UI开发人员的原因：）不确定这是否是问题的一部分，但您的
li
元素显示为
内联块
。jQuery在设置动画时会使用
块
覆盖此属性。但这可能不是你的问题。已修复。现在，
a
s已设置动画根据您的更新，我做了一个简单的测试，孩子们确实继承了他们打算继承的样式，例如“颜色”。它们不会继承边距、背景等。好的，再次更新。现在你可以看到真正的错误了，它看起来确实变化无常。我尝试在测试页面上使用一个简单的标志来防止它触发中间动画。它起作用了，但是如果你走得太快，你就得不到鼠标移动处理器。我采取的任何其他方法都导致它无法运行。也许
悬停
不是设置类转换动画的最佳位置：（如果你安装了jQueryUI，你可以这样做。你可以给它一个持续时间，它会给类的属性设置动画。哎呀，这太乱了。仍然不能正常工作。@Eric-是的，她是个怪物！：o）
div {
    width: 100px;
    height: 100px;
}

.blue {
    background: blue;
    position:relative;
    left: 20px;
}
.myClass {
    background:red;
    margin-top: 50px;
}

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;});
            }
        }
);