如何通过JQuery使图像不透明 [英] How to get image to pulse with opacity with JQuery

问题描述

我试图让图像在一段时间内平滑地改变不透明度。这里是我的代码。

 < script type =text / javascript> 
 pulsem（elementid）{
 var element = document.getElementById（elementid）
 jquery（element）.pulse（{opacity：[0,1]}，
 {duration： 100，//每个单独动画的持续时间
次：3，//将通过脉冲数组[3]遍历三次[0,1] 
缓动：'线性'，//缓动每个单独动画的函数
 complete：function（）{alert（I'm done pulsing！）;} 
}）
< / script> 
 
 
< a href =city.htm>< img src =waterloo.pngonmouseover =javascript：pulsem（waterloo）border =0 class =envid =waterloo/>< / a> 
  

另外，有没有一种方法可以在不需要鼠标悬停的情况下自动发生？谢谢。

解决方案

我假设您的代码是用于jQuery脉冲插件： http://james.padolsey.com/javascript/simple-pulse-plugin-for-jquery/

如果上面的代码不工作，则修复jquery为jQuery。

为了在页面加载时启动它，请执行以下操作：

  jQuery （函数（）{
 jQuery（'＃yourImageId'）。pulse（{
 opacity：[0,1] 
}，{
 duration：100，// duration每个单独的动画
次：3，//将通过脉冲数组[3]遍历[0,1] 
缓动：'线性'，//缓动每个动画的函数
完成： function（）{
 alert（I'm done pulsing！）; 
} 
}）; 
  

在您的图片中添加一个ID，您就是黄金。
}）;

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.

解决方案

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:

jQuery(function() {
jQuery('#yourImageId').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!");
    }
});

Add an id to your image and you're golden. });

这篇关于如何通过JQuery使图像不透明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！