如何使用 JQuery 使图像不透明地脉动答案

【问题标题】：How to get image to pulse with opacity with JQuery如何使用 JQuery 使图像不透明地脉动
【发布时间】：2010-06-09 18:32:21
【问题描述】：

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

<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>

另外，有没有办法让这种情况自动发生而无需鼠标悬停？谢谢。

【问题讨论】：

您可能希望将以下答案之一标记为已接受的答案。

标签： javascript jquery html jquery-plugins pulse

【解决方案1】：

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

如果您上面的代码不起作用，则将“jquery”修复为“jQuery”。

要在页面加载时启动它，只需执行以下操作：

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!");
    }
});

为您的图像添加一个 id，您就是金子。 });

【讨论】：

+1 是的，“document.getElementById”不是 jQuery 方式。 :) 顺便说一句，他的图像 id 是“滑铁卢”
嗯。这似乎不起作用。我引用js文件的方式好吗？他们是在与 htm 文件相同的文件夹中。
@Alex 不，jquery-1.4.2.js 文件应该在其他所有文件之前
不知道这里有评论。 Josh 是对的 - 首先引用 jquery-1.4.2.js。

【解决方案2】：

自行触发动画：

pulsate( $('#waterloo') );

修改代码以持续脉动（不确定这是否是您所追求的） - 脉动效果已降级为它自己的函数，因此您可以直接调用它或在您的事件处理程序中调用它

<script type="text/javascript">
  $(function() { // on document ready
     $('#waterloo').hover( //hover takes an over function and out function
       function() {
         var $img = $(this);
         $img.data('over', true); //mark the element that we're over it
         pulsate(this); //pulsate it
       },
       function() {
          $(this).data('over', false); //marked as not over
       });
  });

 function pulsate(element) {
    jquery(element).pulse({opacity: [0,1]}, // do all the cool stuff
        {    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() {  
                 if(  $(this).data('over') ){ // check if it's still over (out would have made this false)
                     pulsate(this); // still over, so pulsate again
                 }
         }});
  }

<a href="city.htm"><img src="waterloo.png" border="0" class="env" id="waterloo"/></a>

注意 - 要触发事件，您可以使用 .trigger() 或辅助函数，例如

$('#waterloo').mouseover() // will fire a 'mouseover' event

或

$('#waterloo').trigger('mouseover');

【讨论】：

【解决方案3】：

这可能就是您要找的。p>

http://www.infinitywebcreations.com/2011/01/how-to-create-a-throbbingpulsing-image-effect-with-jquery/

【讨论】：

【解决方案4】：

当鼠标悬停在图像上时，我个人会做这样的事情来脉冲并在鼠标移出时恢复完全不透明......

$(document).ready(function () {

    function Pulse(Target, State) {
        //Every 750ms, fade between half and full opacity
        $(Target).fadeTo(750, State?1:.5, function() {Pulse(Target, !State)});
    }

    $("#ImageId").hover(function () {
        $(this).stop()
        Pulse(this);
    }, function () {
        $(this).stop(false, true).fadeTo(200, 1); //200ms to return to full opacity on mouse out
    });
});

【讨论】：