jQuery脈衝效應問題

我試圖在圖像上獲得脈衝效果。在this Fiddle，我希望得到一個淺紫色的邊界在紅圈周圍消失。紅圈應該保持不變。我可以讓他們兩個淡入淡出，但不僅僅是紫色邊框。有什麼想法嗎？jQuery脈衝效應問題

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(); 
    });

來源

2013-05-21 Clive van Hilten

等待，讓您隨心所欲的紅圈一直保持穩定，但是紫色的圓形脈衝，對吧？ –

變化：

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

到：

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

jsFiddle example

.children()只將遍歷DOM中的一個級別，而.find()將向下挖掘多層次。你也想指定.imgPulse div，而不是所有的div。

來源

2013-05-21 14:45:53 j08691

完美，非常感謝！ –

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

來源

2013-05-21 14:46:04

謝謝你瓦列裏，已經提出了你的答案，因爲它與j08691的一樣，只是他首先被提供。 –

你申請到pulseDiv的淡出也適用於兒童的元素，包括imgNoPulse。

這裏有一個工作的jsfiddle：

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

來源

2013-05-21 14:46:34 bcolin

謝謝bcolin，這也有效，所以upvoted它。 –

包含邊界的<div>是包含紅圈div中。你可以使用不同的選擇器。

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

您還可以使用更具體的選擇器，如類。

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

來源

2013-05-21 14:46:36

謝謝爆炸藥丸對這個問題的效果不一樣，提出了這個問題。 –

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-21 14:47:56 shammelburg

另一個偉大的答案，我在這個問題上幸運，謝謝大家。已經提高了它。 –

讓你的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-21 14:49:08

謝謝凱文，另一個很好的答案，所以已經upvoted它。 –

jQuery脈衝效應問題

回答

相關問題