2013-09-21 4 views
2

Я использовал анимацию CSS fadeInLeft от Click here, однако я пришел к выводу, что я добавил jQuery для перехода.CSS-анимации, не работающие в Firefox

$('#one').click(function(){ 
    $('#two-bck').removeClass('animated'); 
    $('#three-bck').removeClass('animated'); 
    $('#four-bck').removeClass('animated'); 
    $('#one-bck').addClass('animated'); 
}); 

click here to see the full code

Переход не работает в Firefox, даже если я добавил префиксы. Кто-нибудь знает, как я могу обойти эту проблему?

+0

Ваш КСС не действует. Из-за этого браузеры действуют странно. [CSS validator] (http://jigsaw.w3.org/css-validator/). Изменить: на вашей консоли отображаются какие-либо ошибки? – Dunno

ответ

1

Ваш код от animate.css отключен, я просто заменил вашу анимацию CSS полной миниатюрной версией animate.css и hey presto работает. http://jsfiddle.net/kJ2UA/14/

Вы можете создать пользовательскую сборку только с анимацией fadeInLeft и включить ее на страницу где-нибудь, если вы не хотите включать полную таблицу стилей.

Кроме того, вы должны очистить ваш Jquery немного (по теме), и т.д .:

$(document).ready(function(){ 
    $('.proBtn').on('click', function(){ 
     $('li').removeClass('active'); 
     $('li a').removeClass('blue'); 
     // Remove anything previously animated 
     $('.animated').removeClass('animated'); 
     // Use current ID to select appropriate box 
     $('#' + $(this).attr('id') + '-bck').addClass('animated'); 
     $(this).parent("li").addClass('active'); 
     $(this).addClass('blue'); 
    }); 
}); 
Смежные вопросы