Question

我正试图在图像上获得脉冲效果。在this Fiddle中，我希望在红色圆圈周围淡入淡出淡紫色边框。红色圆圈应保持静止。我可以让他们两个淡入淡出，但不仅仅是紫色边框。有什么想法吗？

HTML

<div id="pulseDiv">
  <div class="imgNoPulse"><img src="http://ubuntuone.com/1djVfYlV62ORxB8gSSA4R4">
    <div class="imgPulse"><img src="http://ubuntuone.com/2DuAHohinZ7LETkwlSIpM5"></div>
</div>

CSS

.imgNoPulse { position:absolute;left:15px;top:15px;z-index:1; }
.imgPulse { position:absolute;left:-15px;top:-15px;z-index:-1; }

的Javascript

  function fadeThemIn(){
        $('#pulseDiv').children('div').delay(400).fadeIn('slow',function(){fadeThemOut();});
  };
  function fadeThemOut(){
        $('#pulseDiv').children('div').delay(400).fadeOut('slow',function(){fadeThemIn();});
  };
  $(document).ready(function(){
        fadeThemIn();
  });

Answer 1

包含边框的<div>位于包含红色圆圈的div内。您可以使用其他选择器。

$('#pulseDiv').find('div div').delay(400).fadeIn('slow',function(){fadeThemOut();});

您还可以使用更具体的选择器，如类。

http://jsfiddle.net/VwxSh/6/

Answer 2

http://jsfiddle.net/VwxSh/7/

试试这个好友

  function fadeThemIn(){
        $('.imgPulse').fadeIn('slow',function(){fadeThemOut();});
  };
  function fadeThemOut(){
        $('.imgPulse').fadeOut('slow',function(){fadeThemIn();});
  };
  $(document).ready(function(){
        fadeThemIn();
  });

Answer 3

让你的jQuery：这仅针对紫色圆圈

 function fadeThemIn(){
            $('#pulseDiv .imgPulse').delay(400).fadeIn('slow',function(){fadeThemOut();});
      };
      function fadeThemOut(){
            $('#pulseDiv .imgPulse').delay(400).fadeOut('slow',function(){fadeThemIn();});
      };
      $(document).ready(function(){
            fadeThemIn();
      });

Answer 4

变化：

$('#pulseDiv').children('div')

为：

$('#pulseDiv').find('div.imgPulse')

<强> jsFiddle example

.children()仅遍历DOM中的一个级别，而.find()将挖掘多个级别。您还想指定.imgPulse div，而不是所有div。

Answer 5

  function fadeThemIn(){
        $('#pulseDiv').find('.imgPulse').delay(400).fadeIn('slow',function(){fadeThemOut();});
  };
  function fadeThemOut(){
        $('#pulseDiv').find('.imgPulse').delay(400).fadeOut('slow',function(){fadeThemIn();});
  };
  $(document).ready(function(){
        fadeThemIn();
  });

View Example

Answer 6

您应用于pulseDiv的淡入淡出也适用于包含imgNoPulse的儿童元素。

这是一个有效的jsFiddle：

http://jsfiddle.net/VwxSh/3/

jQuery脉冲效应问题

6 个答案: