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

1

変化する：

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

に：

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

jsFiddle の例

.children().find()複数のレベルを掘り下げながら、DOM の 1 つのレベルのみをトラバースします。また、すべての div ではなく、.imgPulse 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 に答える