Question

我有一个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/

Answer 1

(function($) {
    $(document).ready(function() {
        window.pulse_image = $('.pulse_image');
        window.pulse_continue_loop = true;
        PulseAnimation(); // start the loop
    });
})(jQuery);

Answer 2

我不明白为什么您不能删除与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已准备好，这意味着文档已加载，但并非所有与文档相关的资源都已加载。

Answer 3

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

Answer 4

以下是我如何做到的方式：

    <script type="text/javascript">
    $(document).ready(function () {
        alert('Document Ready'); 
        $("#imgPreview").attr('src', '/Upload/Upload_Image.png');
    });
</script>

Answer 5

有很多方法可以达到这个效果，但我发现最快的方法是

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

这不是最好的解决方案，但它会做“技巧”......只需将其添加到document.ready回调中。

Answer 6

这是一种变体，它在页面加载时通过ajax调用加载默认数据。

$(document).ready(function() {

    $.ajax({
        type: 'post',
        url: 'include/ajax.php',
        data: $('#search_filters').serialize(),
        success: function (response) {
            $('#search_display').html(response);
        }
    });

});

Answer 7

  $(document).ready(function() {
    window.pulse_continue_loop = true;
    window.pulse_image = $('.pulse_image');
    setTimeout(function(){
      PulseAnimation();
    } // start the loop
  });

Answer 8

你也可以尝试这种方式。这将在您的页面加载时触发。

function pageLoad(sender,args) {
// call your function
}

使jquery函数在页面加载时运行

8 个答案: