質問

1ページに2セットのboxexがあります。クラス「boxOne」に属する10個のボックス クラス「boxTwo」に属する別の10個
ボタンがあります。ボタンをクリックすると、jqueryエフェクトを使用して、クラス 'Boxone'および 'Boxtwo'に属するすべての要素の背景色を強調表示してからフェードします。

以下がコードです。

var colorOfBox1 = "'" + $(.boxOne).css('backgroundColor') + "'";  
$(.boxOne).animate(
    { 'backgroundColor': "#FF9900" }, 
    { 'queue': false, 'duration': 1000 });

setTimeout( function(){  
        $(.boxOne).animate(
          { 'backgroundColor': colorOfBox1}, 
        {'queue': false, 'duration': 2000} 
      );
}, 2000);

var colorOfBox2 = "'" + $(".boxTwo).css("backgroundColor") + "'";  
$('.boxTwo').animate({ 'backgroundColor': "#FF9900" }, {'queue': false, 'duration': 1000});  
  setTimeout(
    function(){
        $('.boxTwo).animate(  
            { 'backgroundColor': colorOfBox2 }, 
                {'queue': false, 'duration': 2000} 
          );
}, 2000);

ボタンをクリックすると、指定された色ですべてのボックスが強調表示されます。問題は、これらのボックスのうちいくつかがフェードアウトしない場合があることです。彼らの背景は強調されたままです。これは時々、一貫性なしで起こります。 一貫した動作が必要です。

setTimeOut()関数は、そのクラスに属するすべての要素に均一に適用されないことがわかります...いくつかの要素にのみ適用されます。
私はどのような欠陥を作っていますか?

役に立ちましたか?

解決

今、このプラグインを使用していますが、正常に動作します。

http://jquery.offput.ca/highlightFade/old.php

他のヒント

おそらく、最初にJavascriptコードの構文を確認してください。一貫性のない構文は、異なるブラウザで一貫性のない結果を引き起こします。

.boxOneと.boxTwoの周りにいくつかの引用符が欠落しているようです。それがフォーマットエラーなのか意図的なものなのかはわかりません。一部のブラウザで問題が発生している可能性があります。

ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top