Hover эффект не работает с переходом CSS

Question

меня на моем сайте кнопку хороший Totop, как вы можете увидеть здесь:

The following link is with css transition 

http://jsfiddle.net/Zvz6G/

я получил некоторый хороший эффект при наведении, но проблема в том, что с помощью перехода, чтобы получить мой симпатичный эффект парения я теряю свои эффекты FadeIn/Затухание, чтобы показать проблему, здесь тот же код, как описаны выше, только без перехода:

The following link is without css transition 

http://jsfiddle.net/tGeh2/

Как вы можете видеть, что теперь я получил свои эффекты FadeIn/Затухание, но я потери мой парения эффект, Мой вопрос: какова причина этого и как я могу это исправить, спасибо всем и хорошего дня.

Answer 1

на основе кода, Вы можете определить новый класс, который отключает CSS Transitions и добавить его в прокрутки вверх кнопки перед началом fadeOut эффекта, а затем удалить их, когда fadeOut эффект завершен, я изменил свой код и исправил вашу проблему, вы можете увидеть мои изменения в this fiddle.

Answer 2

Я удалил css и добавил его с помощью jquery. http://jsfiddle.net/andaywells/Zvz6G/25/embedded/result/

Проверьте это здесь: http://jsfiddle.net/andaywells/Zvz6G/25/

$('.scrollUp').hover(function() { 
    $('.scrollUp').fadeOut(500).delay(100); 
}); 

$('.scrollUp').mouseleave(function() { 
    $('.scrollUp').fadeIn(500).delay(100); 
}); 

Надеется, что это помогает. Это будет поддерживаться всеми браузерами, предотвращая несоответствия и т. Д.