1

メソッド switchClass に問題があります。newsHoverマウスがnewsAreaトランジションのあるクラスにホバーしているときに、css クラス ( ) を追加/削除したい。

次のコードがあります

$('.newsArea').mouseover(function(){
        $(this).switchClass('','newsHover',500, 'linear');
 }).mouseleave(function(){
        $(this).switchClass('newsHover','',500);
});

ご覧のとおり、メソッドは正しいと思います: http://docs.jquery.com/UI/Effects/ClassTransitionsおよび http://jqueryui.com/docs/switchClass/

newsHover クラスには背景画像があります。

.newsHover{        
        background-image: url("../../images/newsArea-hover.png"); 
        background-repeat: no-repeat; 
        background-position:left top;
        width: 200px; height: 52px;            
      }

画像は表示されますが、トランジションはありません。500 ミリ秒後に表示されます。

css3 クロスブラウザーを使用した任意のソリューションを受け入れることができます。

ここにヒントはありますか??

ありがとう

編集

1.7.2 バージョンの jquery を使用していることを忘れていました。jquery.easing.1.3、および jquery-ui-1.8.23.custom.min (すべてのコンポーネントが選択された状態)

4

2 に答える 2

1

参考までに、説明した動作はまさに期待どおりです。switchClass 関数は、「遷移」の最後にアニメーション化できないプロパティを変更するだけです。switchClass背景画像のアニメーションはサポートされていません。

すべてのスタイルをアニメーション化できるわけではありません。たとえば、背景画像をアニメーション化する方法はありません。アニメーション化できないスタイルは、アニメーションの最後に変更されます。

[http://api.jqueryui.com/switchClass/][1] より

于 2012-10-16T13:22:42.107 に答える
-1

切り替えるための初期クラスを用意します -

$('.newsArea').mouseover(function(){
        $(this).switchClass('oldClass','newsHover', 500);
 }).mouseleave(function(){
        $(this).switchClass('newsHover','oldClass',500);
});

画像を適用した後、画像の読み込みに時間がかかることがありますか?

だからあなたは試すことができます..

.oldClass{
  background-image: url("../../images/newsArea-hover.png"); 
  background-size:0px;
}
.newsHover{        
   background-size: auto;     
}
于 2012-08-31T17:28:50.850 に答える