исчезновение / зависание при помощи jQuery - PullRequest
Новая
       5

исчезновение / зависание при помощи jQuery

1 голос
/ 27 июля 2010

Я пытаюсь добавить простой эффект постепенного исчезновения / ввода на кнопки с помощью jQuery, но я немного застрял в исчезновении.Я использую этот код: 

$('#header #menu li a').hover(function () {
  $(this).fadeOut(0).addClass('hover').fadeIn(300);
},
function () {
  $(this).fadeOut(0).removeClass('hover').fadeIn(0);
});

Он добавляет класс наведения, который определяет фон CSS и исчезает при наведении изображения. Но когда я перемещаю курсор из кнопки, он просто исчезает, как обычно, без выцветанияout.

Можете ли вы помочь мне с этим, пожалуйста?

Большое спасибо за все ответы

Ответы [ 3 ]

3 голосов
/ 27 июля 2010

Эти две функции противоположны друг другу, поэтому должны работать ... ( код обновлен ) 

$('#header #menu li a').hover(function () {
  $(this).fadeOut(0).addClass('hover').fadeIn(300);
},
function () {
  $(this).fadeOut(300)
         .queue(function(){ $(this).removeClass('hover').fadeIn(0).dequeue() });
});

Это довольно некрасиво ... Посмотреть это в действии на http://jsfiddle.net/zS6ex/.

Тем не менее, у вас все еще есть проблема: вы выгораете всю ссылку , входящую или выходящую, а не только изображение.Насколько я знаю, вы не можете установить непрозрачность фонового изображения отдельно (установка полной непрозрачности - это уже боль, если вы делаете это вручную ...)

2 голосов
/ 27 июля 2010

Почему бы вам просто не скрыть это при добавлении класса, так как fadeOut (0) не имеет анимации 

$('#header #menu li a').hover(function () {
  $(this).hide().addClass('hover').fadeIn(300);
},
function () {
  $(this).hide().removeClass('hover').show();
  //  as there is no fading time the line above will be equal to
  $(this).removeClass('hover');
});

когда вам нужно что-то сделать после завершения анимации, вы должны использовать обратный вызов $(...).fadeIn(400,function(){ alert('this is the callback'); }, если вы не используете обратный вызов, код запускается во время анимации.

и я не знаю, является ли он полезным, но в css есть псевдокласс :hover, см. здесь

Поддерживается псевдокласс: hover во всех основных браузерах.

так что с этим вы можете делать различные вещи, как: 

#header #menu li a:hover { ...set style of 'a' when over 'a' }
#header #menu li:hover a { ...set style of 'a' when over 'li' }

просто поиграйте с этим немного, и вы можете многое сделать просто с помощью css

2 голосов
/ 27 июля 2010

Как и много раз отвечали здесь, на SO, вам нужно использовать callbacks из jQuery fx methods, чтобы сделать что-нибудь после анимации завершена. 

$('#menu li a').hover(function(){
    $(this).fadeOut('fast', function(){
        $(this).addClass('hover').fadeIn(300);
    });
}, function(){
});

В любом случае, вызов .fadeOut(0) затушевывает этот элемент без анимации, как мгновенно. Первый параметр - это продолжительность.

http://api.jquery.com/fadeOut/

...