2

我正在尝试在图像上获得脉冲效果。在这个 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();
  });
4

6 回答 6

2

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

试试这个朋友

  function fadeThemIn(){
        $('.imgPulse').fadeIn('slow',function(){fadeThemOut();});
  };
  function fadeThemOut(){
        $('.imgPulse').fadeOut('slow',function(){fadeThemIn();});
  };
  $(document).ready(function(){
        fadeThemIn();
  });
于 2013-05-21T14:47:56.873 回答
2

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

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

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

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

于 2013-05-21T14:46:36.850 回答
2

让你的 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();
      });
于 2013-05-21T14:49:08.813 回答
1

改变：

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

至：

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

jsFiddle 示例

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

于 2013-05-21T14:45:53.787 回答
1 
  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();
  });

查看示例

于 2013-05-21T14:46:04.407 回答
1

您应用的淡入淡出pulseDiv也适用于儿童元素，imgNoPulse包括在内。

这是一个有效的 jsFiddle ：

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

于 2013-05-21T14:46:34.570 回答