Fade In и Fade Out проблема с jQuery на IE8 - PullRequest
Новая
       20

Fade In и Fade Out проблема с jQuery на IE8

1 голос
/ 17 сентября 2011

Я делаю постепенное увеличение и уменьшение на кнопке с помощью jquery. Смотрите здесь: http://evermight.com/test.

Почему переходы состояний при наведении в Google Chrome происходят хорошо, а в IE8 - нет? В IE8 одиночное наведение может вызвать несколько переходов / затуханий. Как заставить IE8 отображать события кнопок так же, как в Google Chrome?

Ответы [ 2 ]

1 голос
/ 17 сентября 2011

Использование .stop() и .animate()

$('.btn-rollover .text').hover(

function() {
    $(this).closest('.btn-rollover').find('.overlay').stop().animate({opacity: 0.0}, 500);
}, function() {
    $(this).closest('.btn-rollover').find('.overlay').stop().animate({opacity: 0.8}, 500);
});

Демо http://jsfiddle.net/tfspz/

0 голосов
/ 17 сентября 2011

Используйте события mouseenter и mouseleave вместо mouseover / mouseout. 

jQuery(document).ready(function($) {
    $('.btn-rollover .text').bind('mouseenter', function(){
        $(this).closest('.btn-rollover').find('.overlay').stop().fadeOut();
    }).bind('mouseleave', function(){
        $(this).closest('.btn-rollover').find('.overlay').stop().fadeIn();
    });

});

Обратите внимание, я также добавил .stop() непосредственно перед вызовами анимации (.fadeOut() и .fadeIn()).Это остановит текущую анимацию перед вызовом следующей.Вместо того, чтобы помещать анимацию в очередь одну за другой, текущая анимация будет остановлена, а новая будет запущена немедленно.

...