4

是否可以撤消switchClass过渡？

我想要一个元素在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);
});

是否可能是因为更改 the 的类li不会导致其子项的样式被转换？

编辑2：

是的，这“修复”了它。现在可以观察到真正的错误（在中间状态下被冻结）。

4

3 回答 3

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;});
            }
        }
);
于 2010-06-14T20:05:40.290 回答
0

慢慢上一门课是没有意义的。一个元素要么有一个特定的类，要么没有，而且 CSS 没有办法在一个类中指示某种“部分包含”。

编辑——@patrick 指出 jQuery UI 确实支持这一点，至少在某种程度上是这样。如果您安装了效果器，那么类操作函数需要一个持续时间参数。

于 2010-06-14T18:38:42.700 回答
0

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

$('#clickme').hover(function() { $('#book').animate({ opacity: 0.25, left: '+=50', height: 'toggle' }, 5000, function() { // Animation complete. }); });

否则慢慢切换课程对我来说没有多大意义

于 2010-06-14T18:43:16.423 回答