如何使用 JQuery 使图像具有不透明度脉冲
我试图让图像在一段时间内平滑地改变不透明度。这是我的代码。
<script type="text/javascript">
pulsem(elementid){
var element = document.getElementById(elementid)
jquery(element).pulse({opacity: [0,1]},
{ duration: 100, // duration of EACH individual animation
times: 3, // Will go three times through the pulse array [0,1]
easing: 'linear', // easing function for each individual animation
complete: function() { alert("I'm done pulsing!"); }
})
</script>
<a href="city.htm"><img src="waterloo.png" onmouseover="javascript:pulsem("waterloo")" border="0" class="env" id="waterloo"/></a>
另外,有没有一种方法可以自动发生这种情况,而不需要鼠标悬停?谢谢。
I am trying to get an image to change opacity smoothly over a duration of time. Here's the code I have for it.
<script type="text/javascript">
pulsem(elementid){
var element = document.getElementById(elementid)
jquery(element).pulse({opacity: [0,1]},
{ duration: 100, // duration of EACH individual animation
times: 3, // Will go three times through the pulse array [0,1]
easing: 'linear', // easing function for each individual animation
complete: function() { alert("I'm done pulsing!"); }
})
</script>
<a href="city.htm"><img src="waterloo.png" onmouseover="javascript:pulsem("waterloo")" border="0" class="env" id="waterloo"/></a>
Also, is there a way for this to happen automatically without the need of a mouseover? Thanks.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
我假设您的代码用于 jQuery 脉冲插件: http: //james.padolsey.com/javascript/simple-pulse-plugin-for-jquery/
如果上面的代码不起作用,请将“jquery”修复为“jQuery”。
要在页面加载时启动它,只需执行以下操作:
向您的图像添加一个 id 即可。
});
I'm assuming your code is for the jQuery pulse plugin: http://james.padolsey.com/javascript/simple-pulse-plugin-for-jquery/
If your above code is not working, then fix "jquery" to be "jQuery".
For starting it on page load, just do:
Add an id to your image and you're golden.
});
要根据自己的意愿触发动画:
修改代码以持续脉动(不确定这是否是您想要的)-脉动效果被降级为它自己的函数,因此您可以直接调用它或在事件处理程序中调用它
注意 - 要触发事件,您可以使用 .trigger() 或辅助函数,例如
或
To fire the animation of your own accord:
revised code to continually pulsate (wasn't sure if this was what you're after) - the pulsate effect is relegated to it's own function so you can call it directly or in your event handler
Note - to trigger events, you can use .trigger() or the helper functions, like
or
这可能就是您正在寻找的。
http://www.infinitywebcreations.com/2011/01/how-to-create-a-throbbingpulsing-image-effect-with-jquery/" infinitywebcreations.com/2011/01/how-to-create-a-throbbingpulsing-image-effect-with-jquery/
this might be what you're looking for.
http://www.infinitywebcreations.com/2011/01/how-to-create-a-throbbingpulsing-image-effect-with-jquery/
我个人会做这样的事情,当鼠标悬停在图像上时发出脉冲,并在鼠标移出时返回到完全不透明......
I personally do something like this to pulse when the mouse hovers over the image and return to full opacity on mouse out...