我正在尝试在没有Flash的情况下制作一些动画,我需要一个徽标来加载,然后在完全停止之前进行抖动
我需要它在加载时发生(抖动是客户端的请求)。
现在,当你点击它时,它就可以工作了,但我需要它自动运行。
这是我的JavaScript代码:
$(window).load(function() {
jQuery.fn.shake = function() {
this.each(function(i) {
$(this).css({"position": "absolute"});
for(var x = 1; x <= 3; x++) {
$(this).animate({left: 43}, 10)
.animate({left: 23}, 50)
.animate({left: 23}, 10)
.animate({left: 13}, 50)
.animate({left: 43}, 50)
.animate({left: 33}, 50)
.animate({left: 43}, 50);
}
});
return this;
}
$("#logo").click(function() {
$(this).shake();
});
});
#logo
元素是包含图像的div。
如有任何帮助,我们将不胜感激,谢谢。
<script type='text/javascript'>
jQuery.fn.shake = function() {
this.each(function(i) {
$(this).css({
"position": "absolute"
});
for (var x = 1; x <= 3; x++) {
$(this).animate({
left: 43
}, 10).animate({
left: 23
}, 50).animate({
left: 23
}, 10).animate({
left: 13
}, 50).animate({
left: 43
}, 50).animate({
left: 33
}, 50).animate({
left: 43
}, 50);
}
});
return this;
}
$(document).ready(function() {
$("#logo").shake();
});
</script>
如果需要模拟点击,可以将其添加到代码中:
$("#logo").click();
无论如何,我建议您使用$(document).ready而不是window,因为它允许您在加载文档后执行脚本。
<script type='text/javascript'>//<![CDATA[ $(document).ready(function(){ jQuery.fn.shake = function() { this.each(function(i) { $(this).css({ "position" : "absolute" }); for (var x = 1; x <= 3; x++) { $(this).animate({ left: 43 }, 10).animate({ left: 23 }, 50).animate({ left:23},10).animate({ left: 13 }, 50).animate({ left: 43 }, 50).animate({ left: 33 },50).animate({ left: 43 }, 50); } }); return this; } $("#logo").click(function() { $(this).shake(); }); });//]]> </script>
如果你想在不点击div的情况下完成,为什么要使用点击处理程序。当页面加载时,你可以这样做:
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
jQuery.fn.shake = function() {
this.each(function(i) {
$(this).css({ "position" : "absolute" });
for (var x = 1; x <= 3; x++) {
$(this).animate({ left: 43 }, 10).animate({ left: 23 }, 50).animate({ left:23},10).animate({ left: 13 }, 50).animate({ left: 43 }, 50).animate({ left: 33 },50).animate({ left: 43 }, 50);
}
});
return this;
}
$(this).shake();
});//]]>
</script>
$("#logo").shake()
在加载函数结束时不工作吗?
代替使用:
$("#logo").click(function() {
$(this).shake();
});
用途:
$("#logo").shake();
您不必添加onclick
事件侦听器并模拟单击,只需直接启动该函数即可。
您实际上应该调用$('#logo').shake();
,但也可以执行$('#logo').trigger('click');
查看触发器方法的文档。