1

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

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

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

1 ответ 1

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

Вообщем вот

2
  • Спасибо огромное, действительно думал об анимировании через сss3 и обработке класса, но не знал, как реализовать правильно, все отлично работает.
    – ProfizBB
    4 дек 2014 в 8:33
  • для таких целей также можно использовать функцию toggleClass(): jsfiddle.net/mzeuu2rL/1
    – MasterAlex
    4 дек 2014 в 8:57

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.