.animate не работает в Firefox (хотя .css делает) - PullRequest
Новая
       17

.animate не работает в Firefox (хотя .css делает)

2 голосов
/ 29 июня 2011

Хорошо, пока это работает в Chrome, но не в Firefox. Это довольно просто, поэтому я не уверен, что происходит. Если я изменю .animate на .css, он будет работать идеально (без анимации). 

$("#superfish-1 > li").hover(function() {
    $(this).animate({"border-left" : "3px solid #A5D572", "margin-left" : "-2px"}, "fast");
}, function() {
    $(this).animate({"border-left" : "1px solid #EFEFEF", "margin-left" : "0px"}, "fast");
});

Спасибо

Ответы [ 3 ]

2 голосов
/ 29 июня 2011

Вторым параметром функции hover () также должна быть функция animate(), а не css(). Если предполагается, что css() там, удалите его второй параметр ("fast").

1 голос
/ 29 июня 2011

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

, как упомянуто @mingos, вы должны удалить быстрый параметр в функции css до.

http://jsfiddle.net/meo/Gsqre/1/

проверено в Chrome.Цвет не оживляет.

Эта версия анимирует с и на полях и работает во всех браузерах: 

$("#superfish-1 > li").hover(function() {
    $(this).animate({"border-left-width" : "3px", "margin-left" : "-2px"}, "fast");
}, function() {
    $(this).css({"border-left-width" : "1px", "margin-left" : 0});
});

Вы можете изменить цвет отдельно в CSS, если хотите, даже анимироватьЭто.Или сделать всю анимацию в CSS: http://jsfiddle.net/meo/Gsqre/3/

0 голосов
/ 29 июня 2011

Хорошо, вот как ты это делаешь.Сначала необходимо css цвет границы, а затем анимировать ширину:

Убедитесь, что вы используете свойство borderWidth или borderLeftWidth (без кавычек), в противном случае оно по какой-то причине не работает. 

$("#superfish-1 > li").hover(function() {
    $(this).css({"border-left" : "1px solid #A5D572"}).animate({borderLeftWidth : "3px", "margin-left" : "-2px"}, "fast");
}, function() {
    $(this).animate({borderLeftWidth : "1px", "margin-left" : "0px"}, "fast").css({"border-left" : "1px solid #EFEFEF"});
});
...