1

HTMLコードにあるdivをアニメーション化しようとしているだけです。サマーコースを受講したばかりで、それが終わった今、コーディングを続けてもっと学びたいので、いじっているだけですが、不足しています.

$(document).ready(function() {
    $('div').hover(function() {
        $(this).animate({height: '68px',opacity: '0.3'},'650'),
            function() {
        $(this).animate({height: '45px',opacity: '1.0'},'650');
        };
    });
});

私が知る限り、すべてがうまく設定されており、ホバーを使用した理由は、「mouseenter/leave」がクロムで機能しないためです（何らかの理由で）。同様の質問をたくさん見ましたが、探していたものを見つけることができませんでした。

4

3 に答える 3

4

あなたのブレースは台無しです。私はそれがこれであるべきだと思います：

$(document).ready(function() {
    $('div').hover(function() {
        $(this).animate({height: '68px',opacity: '0.3'},'650');
    }, function() {
        $(this).animate({height: '45px',opacity: '1.0'},'650');
    });
});

参考までに、ブラウザのエラー コンソールまたはデバッグ コンソールを見ると、次のような構文エラーが表示されるはずです。

.stop(true, true)また、マウスをすばやく出し入れした場合にアニメーションが重ならないように追加することもできます。

$(document).ready(function() {
    $('div').hover(function() {
        $(this).stop(true, true).animate({height: '68px',opacity: '0.3'},'650');
    }, function() {
        $(this).stop(true, true).animate({height: '45px',opacity: '1.0'},'650');
    });
});

作業例: http://jsfiddle.net/jfriend00/tZEWy/

于 2013-07-08T16:21:01.800 に答える
1

最初の関数を閉じるのに失敗したと思います。ここでこれを試してください

$(document).ready(function() {
    $('div').hover(
        function() {
            $(this).animate({height: '68px',opacity: '0.3'},'650');
        },
        function() {
            $(this).animate({height: '45px',opacity: '1.0'},'650');
        }
    );
});
于 2013-07-08T16:21:22.550 に答える
0

jQuery のホバー機能は、2 つの機能を組み合わせただけです。

それは と の混合物で.mouseenterあり.mouseleave、それらはそのパラメータにあります。

で、.hoverこれ.hover(.mouseenter, .mouseleave)です。

したがって、次のようにする必要があります。

$('div').hover(function(){

    $(this).animate({height: '68px',opacity: '0.3'},'650');

} /*mouseenter */, function(){

    $(this).animate({height: '45px',opacity: '1.0'},'650');

} /*mouseleave*/);
于 2013-07-08T16:30:34.160 に答える