Сложная работа jQuery .hover - PullRequest
Новая
       35

Сложная работа jQuery .hover

0 голосов
/ 15 мая 2010

Следующий код доставляет мне много хлопот. Отметим, что .hover меняет фоновое изображение. Во-первых, как я могу объединить их с .hover, а не с отдельным указателем мыши и указателем мыши? Во-вторых, как я могу сделать так, чтобы во время смещения div вверх фоновое изображение одновременно исчезало? 

$('div.designbox.orangehello').mouseenter(function() {
   $('div.designbox.orangehello').animate({
     top: '-=10',
   }, 55, function() {
     $(this).addClass('hover');
   });
 });

 $('div.designbox.orangehello').mouseleave(function() {
   $('div.designbox.orangehello').animate({
     top: '+=10',
   }, 55, function() {
     $(this).removeClass('hover');
   });
 });

1 Ответ

1 голос
/ 15 мая 2010

Чтобы объединить два с помощью .hover(), сделайте следующее: 

$('div.designbox.orangehello').hover(function() {
   $(this).animate({ top: '-=10' }, 55, function() {
     $(this).addClass('hover');
   });
}, function() {
   $(this).animate({ top: '+=10' }, 55, function() {
     $(this).removeClass('hover');
   });
});

Что касается затухания, вам нужно опубликовать разметку, вам понадобится дополнительная <div> или что-то, содержащее другой фон.

Несколько других заметок, у вас есть { top: '-=10', } для ваших аргументов анимации ... следите за этими запятыми, они доставят вам неприятности, особенно в IE. Кроме того, у вас был $('div.designbox.orangehello') внутри, если вы анимируете много из них, измените это обратно, но если вы хотите, чтобы текущий использовал только $(this), как у меня выше.

...