20

マウスホバー時に画像の不透明度を変更して脈動効果を生み出すjquery関数がありますが、ページが読み込まれるとすぐに画像が脈動するように変更し、マウスホバー要素のマウスオーバーとマウスアウトを削除したいと思います.

ここに私が持っているコードがあります

    (function($) {
        $(document).ready(function() {
            window.pulse_image = null;
            window.pulse_continue_loop = false;

            $('.pulse_image').mouseover(function() {
            // User is hovering over the image.
            window.pulse_continue_loop = true;
            window.pulse_image = $(this);

            PulseAnimation(); // start the loop
        }).mouseout(function() {
            window.pulse_continue_loop = false;
            window.pulse_image.stop();
            window.pulse_image.css('opacity',1);
        });
    });
})(jQuery);


function PulseAnimation()
{
    var minOpacity = .33;
    var fadeOutDuration = 650;
    var fadeInDuration = 650;

    window.pulse_image.animate({
        opacity: minOpacity
    }, fadeOutDuration, function() {
        window.pulse_image.animate({
            opacity: 1
        }, fadeInDuration, function() {
            if(window.pulse_continue_loop) {
                PulseAnimation();
            }
        })
    });
}

http://www.infinitywebcreations.com/2011/01/how-to-create-a-throbbingpulsing-image-effect-with-jquery/から

4

8 に答える 8

25 
(function($) {
    $(document).ready(function() {
        window.pulse_image = $('.pulse_image');
        window.pulse_continue_loop = true;
        PulseAnimation(); // start the loop
    });
})(jQuery);​
于 2012-09-17T23:24:32.487 に答える
10

mouseoverおよびmouseoutイベントに関連するコードを削除できなかった理由がわかりません。「ページの読み込み」とは、HTML ドキュメントが読み込まれたときを意味する場合は、次のことを試してください。

$(document).ready(function() {
    window.pulse_image = $('.pulse_image');
    window.pulse_continue_loop = true;
    PulseAnimation();
});

「ページの読み込み」とは、ページ上のすべての画像も読み込まれたことを意味する場合は、これを試してください。

$(window).load(function() {
    window.pulse_image = $('.pulse_image');
    window.pulse_continue_loop = true;
    PulseAnimation();
});

後者のコード例は、すべての画像の読み込みが完了するまで待機します。windowこれは、 「ロード」されていることを介してトリガーされます。むしろ、最初のコード例はdocument準備ができていることを示しています。これは、ドキュメントが読み込まれていることを意味しますが、ドキュメントに関連するすべてのリソースも読み込まれているわけではありません。

于 2012-09-17T23:20:37.423 に答える
3 
  $(document).ready(function() {
    window.pulse_continue_loop = true;
    window.pulse_image = $('.pulse_image');
    PulseAnimation(); // start the loop
  });
于 2012-09-17T23:22:08.377 に答える
2

これが私がやった方法です：

    <script type="text/javascript">
    $(document).ready(function () {
        alert('Document Ready'); 
        $("#imgPreview").attr('src', '/Upload/Upload_Image.png');
    });
</script>
于 2015-10-21T10:18:42.733 に答える
1

その効果を得る方法はたくさんありますが、私が最も早く見つけたのは

 setTimeout(function(){
     $(".pulse_image").trigger('mouseover');
 }, 1300);

これは確かに最善の解決策ではありませんが、「トリック」を実行します...これをdocument.readyコールバックに追加するだけです。

于 2012-09-17T23:42:26.223 に答える