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

のクラスを変更してもli、その子のスタイルが遷移しないためでしょうか?

EDIT2：

うん、それはそれを「修正」しました。真のバグは、そのすべての栄光で観察できるようになりました (中間状態でフリーズします)。

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

jQuery の何らかの形式の .animate 関数を探しているようです。

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

そうでなければ、クラスをゆっくりと切り替えることは私にはあまり意味がありません

于 2010-06-14T18:43:16.423 に答える
0

ゆっくりとクラスを取得しても意味がありません。要素は特定のクラスを持っているか持っていないかのどちらかであり、CSS はクラスにある種の「部分的な包含」を示す方法を提供しません。

編集— @patrick は、jQuery UI が実際にそれを少なくともある程度サポートしていると指摘しています。エフェクトをインストールすると、クラス操作関数は期間引数を取ります。

于 2010-06-14T18:38:42.700 に答える