5

テキストリンクを継続的に光らせたり脈動させたりするための次の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>

つまり、基本的には、ここに何を追加すれば効果がクリックされると停止するかを知る必要があるだけです。

同じリンクをもう一度クリックすると、ページの表示されたセクションが非表示になります。

良識ある方からの回答をお待ちしております。

スコット。

4

2 に答える 2

8

click イベントにバインドしてstop()を呼び出すだけです。また、不透明度が1に復元されていることを確認する必要があります。

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

これは動作中の jsFiddleです。

于 2011-10-08T12:46:18.950 に答える
3

解決策は非常に簡単です。そのことを行う前に、関数にクラスがないpulsate()ことを確認してください。そのクラスがある場合、関数はリンクをアニメーション化して完全な不透明に戻しますが、脈動は継続しません。.pulsatestoppulsate()

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-08T12:51:55.653 に答える