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

我不明白为什么你不能只删除与mouseoverandmouseout事件相关的代码。如果“页面加载”是指加载 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 回答
1

这是一个在页面加载时使用 ajax 调用加载默认数据的变体。

$(document).ready(function() {

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

});
于 2018-07-20T17:09:58.313 回答
0 
  $(document).ready(function() {
    window.pulse_continue_loop = true;
    window.pulse_image = $('.pulse_image');
    setTimeout(function(){
      PulseAnimation();
    } // start the loop
  });
于 2014-01-24T11:58:43.467 回答
0

你也可以试试这个方法。这将在您的页面加载时触发。

function pageLoad(sender,args) {
// call your function
}
于 2014-09-17T09:28:59.210 回答