2009-08-27 24 views
3

が含まれている場合switchClassはIE8でエラーを投げ、私は以下のCSSクラスIには、次のdiv

にいくつかのアニメーションをしたい、このクラスを使用する

.switch-format{ 
    background-color: yellow; 
} 
.switch-format1{ 
    background-color: blue; 
} 
.switch-format2{ 
    color: red; 
} 

をしました続き

<div id="switch-class" class='switch-format' style="margin-top: 5px;"> 
    Effects - Switch 
</div> 

は5秒間隔

setTimeout(function() { 
    alert('Switch 1'); 
    jq('#switch-class').switchClass('switch-format', 'switch-format1', 3000); 
}, 5000); 

setTimeout(function() { 
    alert('Switch 2'); 
    jq('#switch-class').switchClass('switch-format1', 'switch-format2', 3000) 
}, 10000); 

setTimeout(function() { 
    alert('Switch 3'); 
    jq('#switch-class').switchClass('switch-format2', 'switch-format', 3000) 
}, 15000); 

で授業を切り替えるswitchClassを使用する私のjQueryのコードです最初のスイッチはうまくいきますが、2番目のスイッチが起きるとIE8で失敗し、FF3でうまく動作します。

エラーは '無効なプロパティ値'です。

はIEで、それは私がIE8でこれをテストしてみた

<html> 
<head> 
    <script type="text/javascript" src ="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> 
    <script type="text/javascript" src ="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script> 
</head> 
<body> 
    <style type="text/css"> 
     .switch-format{ 
      background-color: yellow; 
     } 
     .switch-format1{ 
      background-color: blue; 
     } 
     .switch-format2{ 
      color: red; 
     } 
    </style> 

    <div id="switch-class" class='switch-format' style="margin-top: 5px;">Effects - Switch</div> 

    <script type="text/javascript"> 
     setTimeout(function() { 
        alert('Switch 1'); 
        $('#switch-class').switchClass('switch-format', 'switch-format1', 3000); 
       }, 5000); 

     setTimeout(function() { 
        alert('Switch 2'); 
        $('#switch-class').switchClass('switch-format', 'switch-format2', 3000) 
       }, 10000); 

     setTimeout(function() { 
        alert('Switch 3'); 
        $('#switch-class').switchClass('switch-format2', 'switch-format', 3000) 
      }, 15000); 
    </script>  
</body> 
</html> 

この問題を再作成するには次の行に以下の値を持つ

fx.elem.style[ fx.prop ] = fx.now + fx.unit; 

fx.prop = 'borderColor'; 
fx.now = NaN; 
fx.unit = 'px'; 
fx.elem.style[ fx.prop ] = ''; 
fx.elem is the div with id 'switch-class'; 

コードを失敗しました。

誰もがあなたがこれらの要素に影響されて設定された無効なボーダー色の値を有することができる私は、この問題

+1

私はこれを示唆してくれたが、「背景色」ではなく「背景」を試してみることをお許しください。 jQueryのサイトで提供されている例では、CSSで "-color"を使用していません。 – Sampson

+0

最後に、この値の割り当てでエラーが発生したようです。 fx.elem.style ['borderColor'] = 'NaNpx'; –

+0

CSSの他の場所でdivを設定していますか? – Sampson

答えて

1

が機能していません。

2

を解決するために助けることができます。あなたは(存在する場合)、それを追い詰めるしようとする、または明示的にこれらのクラスのための新しい値を設定できます

border-color:transparent; 

は、おそらくこのエラーを取り除くためにあなたのクラスに追加することができます。

+0

border-colorプロパティをチェックしましたが、選択したdivに設定されていません –

+0

jqueryが古いスタイルと新しいスタイルの違いをどうにかして見つけようとしているのは、 -色。 –

1

カラープロパティが設定されている場合、ボーダーまたはスクロールバーベースセットがなくても、IE/FFはborder-colorおよびscrollbar-base-colorプロパティに同じ値をとるためです。

スイッチングクラスのこれらのプロパティの明示的な値を設定することで、この問題を解決できます。固定クラスは

<style type="text/css"> 
     .switch-format{ 
      background-color: yellow; 
      border: transparent; 
      scrollbar-base-color: white; 
     } 
     .switch-format1{ 
      background-color: blue; 
      border: transparent; 
      scrollbar-base-color: white; 
     } 
     .switch-format2{ 
      color: orange; 
      border: transparent; 
      scrollbar-base-color: white; 
     } 
    </style> 

以下に示す。どういうわけか、スクロールバーベースカラー用の透明値は、私がjQuery forumでこの問題を掲載していたし、彼らはこの問題を修正しました

+0

あなた自身の答えをチェックしてそれを閉じるようにしてください。 – Dorjan

+0

私はそれにチェックを入れようとしますが、明日あなた自身の答えを受け入れることができます。私は明日それをチェックします。 –

関連する問題