Добавить обработчик click() в скрипт

Рейтинг: 1Ответов: 1Опубликовано: 03.12.2014

Есть такой скрипт, который заставляет мигать блок после загрузки страницы

$(document).ready(function() {
    function blink(){
        $('.test')
        .fadeOut('slow')    
        .fadeIn('slow');
        setTimeout(blink,1000);
    }
    blink();
});

Сколько не бился над ним, нуб еще, не могу нормально привязать, чтобы по клику анимацию останавливало и потом по клику снова запускало её, максимум что смог, это просто запускать и останавливать по клику, но тогда при загрузке страницы изначально блок не анимирован ...

jquery
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

html

[div class = "test btn_blink" style = "background: grey; width: 100px;"]TEST[div]

css

.btn_blink {
    -moz-animation: blink 1s ease 0s infinite normal;
    -webkit-animation: blink 1s ease 0s infinite normal;
    -ms-animation: blink 1s ease 0s infinite normal;
    animation: blink 1s ease 0s infinite normal;
}
@-ms-keyframes blink{   
    from { background-color: grey; }  
    to { background-color: red; } 
}
@-webkit-keyframes blink{   
    from { background-color: grey; }  
    to { background-color: red; } 
}
@-moz-keyframes blink {   
    from { background-color: grey; }  
    to { background-color: red; } 
}

js

$(document).on('click', '.test', function(){ 
    if($(this).hasClass('btn_blink')) {
         $(this).removeClass('btn_blink');
    } else {
        $(this).addClass('btn_blink');
    }   
});

Вообщем вот