0 
$(function(){
    $('#product .btn-purchase')
            .mouseover(function(){
                $(this).stop().animate($(this).addClass('.btn-purchase-hover'), {duration:500})
            })
            .mouseout(function(){
                $(this).stop().animate($(this).removeClass('.btn-purchase-hover'), {duration:500})
    });
});

..なぜこれが機能しないのかわからない、私は何が間違っているのですか？

4

4 に答える 4

1

animate 関数は、主に数値 CSS プロパティで機能します。

詳細については、こちらを参照してください: http://api.jquery.com/animate/

編集:代わりにjQueryでfadeIn / outメソッドを使用することをお勧めします。たとえば、次のようなことができます。(頭のてっぺんのコードです。.btn-purchase の後に正しい画像の div があると仮定します)

$(function(){
    $('#product .btn-purchase')
            .mouseover(function(){
                var $this = $(this);
                  $this.fadeOut(function(){ $this.next().fadeIn(); });
            })
            .mouseout(function(){
                  $this.fadeOut(function(){ $this.prev().fadeIn(); });
    });
});

また、IE をサポートしていない場合は、CSS トランジションを使用すると役立つ場合があることも付け加えておきます。

私の意見では、これは間違いなくより優れた/より効率的な方法であるため、jqueryでaddClass/removeClassをアニメーション化するこの回答をご覧ください

シュレヤス N

于 2013-03-03T20:07:59.590 に答える
0

JQuery animate は、クラスではなく CSS プロパティをアニメーション化するために使用されます。この回答が示すように、より良い方法は CSS トランジションを使用することです (CSS3 のみをサポートしている場合)。.animation()または、多くのものをアニメーション化する場合は、メソッドで CSS プロパティとしてそれらを提供する必要があります。

問題が解決することを願っています。

于 2013-03-03T20:12:00.180 に答える
0

次のように、DOM が完全にロードされた後にコードが実行されるように、document.ready を使用する必要があります。

$(document).ready(function() {
    $('#product .btn-purchase')
            .mouseover(function(){
                $(this).stop().animate($(this).addClass('.btn-purchase-hover'), {duration:500})
            })
            .mouseout(function(){
                $(this).stop().animate($(this).removeClass('.btn-purchase-hover'), {duration:500})
    });
});
于 2013-03-03T20:05:28.760 に答える
0

これがあなたの質問に対する正確な答えではないことはわかっています。しかし、Jan が以前にコメントしたように、これを css で実装することを考えるかもしれません。

それがどのように見えるかについてのアイデアを提供するだけです：

 #product .btn-purchase{
     background-color: blue;
     transition: all 1s ease-in;
     -webkit-transition: all 1s ease-in;
     -moz-transition: all 1s ease-in;
 }


 #product .btn-purchase:hover{
     background-color:  red;
 }
于 2013-03-03T20:51:07.233 に答える