-1

オブジェクトの背景を緑色に点滅させてから、既存の色にフェードアウトする、一般的な「色の確認のフラッシュ」機能を作成しようとしています。

したがって、click() でこれを呼び出す 2 つの要素がある場合があります。

li background-color: red
li background-color: black

最初のものをクリックすると、緑から赤にフェードアウトします。最初のものをクリックすると、緑から黒にフェードアウトします。

jQuery ロジック:

クリックイベント:

listItem.each(function(){confirmFlash($(this),$(this).css("backgroundColor"))});

関数：

function confirmFlash(objectToFlash,backgroundColor){
    objectToFlash.css("backgroundColor","#84da9a").animate({opacity: 1}, 1000).animate({backgroundColor: backgroundColor}, 500);
}

これはうまくいきます。キャッチ：

上記の LI にも :hover 状態の背景色を指定すると、次のようになります。

li background-color: red
li background-color: black
li:hover background-color: purple

その後、すべてのフェードが緑から紫に変わります。LI をクリックした時点では、背景は確かに紫色であるため、これは理にかなっています。

「非ホバー」CSS クラスの背景色を取得する賢い方法はありますか?

言い換えれば、疑似クラスではなく、LI の現在のクラスに割り当てられている背景色を取得したいということです。

または、ホバーをCSSではなく実装するソリューションですが、jQueryでも実装できますか?

4

3 に答える 3

0

これが私が思いついたものです。CSS から :hover クラスを省略し、.hover を作成してから、jquery 経由で追加または削除しました。

function createToggleList(){
    // create mouseovers/outs 
    $("ul.toggleList li").mouseover(function(){
        $(this).addClass("hover");
    });
    $("ul.toggleList li").mouseout(function(){
        $(this).removeClass("hover");
    });     
    // attach the click event
    $("ul.toggleList li").click(function(){toggleToggleListItem($(this))})
};

次に、クリック イベントでトリガーされる関数で、HOVER クラスを削除して、ホバーする前の背景を取得できるようにします。

function toggleToggleListItem(listItem) {
    listItem.removeClass("hover");
    confirmFlash(listItem,listItem.css("backgroundColor"));
};

そして、フラッシュを作成する関数は次のとおりです。

function confirmFlash(objectToFlash,backgroundColor){
    objectToFlash.css("backgroundColor","#84da9a").animate({opacity: 1}, 1000).animate({backgroundColor: backgroundColor}, 500, function(){
        objectToFlash.removeAttr("style");
    });
}

アニメーションによって作成された新しいインライン スタイルではなく、アイテムが CSS ファイルから再度継承されるようにするため、アニメーション後に STYLE 属性を削除する必要があることに注意してください。

そしてそれはうまくいきます。うわー！

于 2009-10-29T22:46:30.237 に答える
0

色を直接アニメーション化できるカラープラグインを実際にインストールする必要があります。テキストと背景の両方がアニメーション化されるため、不透明度のアニメーション化には問題があります。

参照: http://plugins.jquery.com/project/color

于 2009-10-29T21:58:10.827 に答える
0

次のように、confirmFlash 機能をバインドするときに、初期背景色を変数に格納できます...

jQuery.fn.confirmFlash = function(config){
    this.each(function() {
        var elem = jQuery(this);

        // Store the starting background color
        var startBg = elem.css("backgroundColor");

        // When the element is clicked
        elem.click(function() {
            // Set the start background color
            elem.css("backgroundColor", startBg);
            // Animate to the "flash" color
            elem.animate({backgroundColor: config.backgroundColor}, {duration: 1000, complete: function() {
                // Animate back to the start background color
                elem.animate({backgroundColor: startBg}, {duration: 1000});
            }});
        });
    });
};

そして、あなたはそれをこのように使うことができます...

$("li").confirmFlash({backgroundColor: "#84da9a"});
于 2009-10-29T22:02:34.823 に答える