Javascript свечение / пульсировать эффект, чтобы остановить на клике - PullRequest
Новая
       50

Javascript свечение / пульсировать эффект, чтобы остановить на клике

5 голосов
/ 08 октября 2011

У меня есть следующий 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>

В общем, мне просто нужно знать, что мне нужно добавить, чтобы эффект прекратился после того, как на него нажали.

Если снова щелкнуть ту же ссылку, раскрытый раздел страницы будет скрыт - не слишком ли сложно запустить эффект после повторного нажатия?

Я с нетерпением жду ответа от вас, хорошие люди.

Скотт.

Ответы [ 2 ]

8 голосов
/ 08 октября 2011

Просто привяжите к событию 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 .

3 голосов
/ 08 октября 2011

Решение довольно простое.Пусть ваша функция 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');
    });
});
...