使jquery函数在页面加载时运行
使jquery函数在页面加载时运行
提问于 2012-09-18 07:17: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/
回答 8
Stack Overflow用户
回答已采纳
发布于 2012-09-18 07:24:32
(function($) {
$(document).ready(function() {
window.pulse_image = $('.pulse_image');
window.pulse_continue_loop = true;
PulseAnimation(); // start the loop
});
})(jQuery);Stack Overflow用户
发布于 2012-09-18 07:20:37
我不明白为什么您不能删除与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已准备就绪，这意味着文档已加载，但与文档相关的所有资源并不都已加载。
Stack Overflow用户
发布于 2012-09-18 07:22:08
$(document).ready(function() {
window.pulse_continue_loop = true;
window.pulse_image = $('.pulse_image');
PulseAnimation(); // start the loop
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12468374
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号