Javascript發光/脈動效果停止點擊

我點擊以下Javascript來連接文本鏈接發光/脈動。此鏈接顯示同一頁面的另一部分，因此我希望在用戶點擊它時停止。Javascript發光/脈動效果停止點擊

<script type="text/javascript"> 
    $(document).ready(function() { 
     function pulsate() { 
      $(".pulsate").animate({opacity: 0.2}, 1200, 'linear') 
         .animate({opacity: 1}, 1200, 'linear', pulsate); 
     } 

     pulsate(); 
    }); 
    </script>

所以基本上，我只需要知道我需要什麼，這樣一旦被點擊的效果將停止在這裏補充。

如果再次單擊相同的鏈接，頁面的顯示部分將會隱藏 - 在第二次點擊後再次啓動效果太麻煩了嗎？

我期待着您的好人回答。

Scott。

來源

2011-10-08 scottk

這似乎危險地接近重現標籤。如果行動是重要的，你可能應該簡單的做，做出其他不太重要的選擇，或者只是在後臺進行... – Kzqai

有點像是的，但隨着淡入淡出 - 不用擔心它在頁面上看起來不是很微妙的字體顏色。我只需要一旦它被點擊就停下來。 – scottk

嘿，只要你有目的和適度地使用它，那麼。：D – Kzqai

只需綁定到單擊事件並致電stop()。你也應該確保透明度已經恢復到：

$(document).ready(function() { 
    function pulsate() { 
     $(".pulsate").animate({ opacity: 0.2 }, 1200, 'linear') 
        .animate({ opacity: 1 }, 1200, 'linear', pulsate) 
        .click(function() { 
         //Restore opacity to 1 
         $(this).animate({ opacity: 1 }, 1200, 'linear'); 
         //Stop all animations 
         $(this).stop(); 
        }); 
     } 

    pulsate(); 
});

這裏的a working jsFiddle。

來源

2011-10-08 12:46:18

我對這種方法感覺不太舒服。對於每個循環，$（'。pulsate'）'DOM元素都註冊一個click函數。如果有5個元素並且它們循環約1分鐘，則會有小於（5 * 60）的功能來阻止它。 –

@TalhaAhmedKhan當動畫調用pulsate函數時，可以用一個參數來調用它，以告訴它不要註冊點擊處理程序。 –

@TalhaAhmedKhan，如果你有更好的答案，請發佈。請不要完全改變我的回答（或任何其他人）並添加「編輯者」行。 –

該解決方案非常簡單。讓你的pulsate()函數確保.pulsate在做它的事情之前沒有類stop。如果它確實有這個類，那麼pulsate()函數將簡單地將鏈接設置爲完全不透明的動畫，但不會繼續脈動。

詹姆斯的例子可以作爲很好，但我更喜歡我的做法，因爲他的方式一遍又一遍綁定click事件.pulsate。這種事情可能會導致問題，這取決於您網頁的其他部分在做什麼。

活生生的例子：http://jsfiddle.net/2f9ZU/

function pulsate() { 
    var pulser = $(".pulsate"); 
    if(!pulser.hasClass('stop')){ 
     pulser.animate({opacity: 0.2}, 1200, 'linear') 
     .animate({opacity: 1}, 1200, 'linear', pulsate); 
    }else{ 
     pulser.animate({opacity:1},1200) 
      .removeClass('stop'); 
    } 
} 

$(document).ready(function() { 
    pulsate(); 
    $('a').click(function(){ 
     $('.pulsate').addClass('stop'); 
    }); 
});

來源

2011-10-08 12:51:55 maxedison

Javascript發光/脈動效果停止點擊

回答

相關問題