объединить вызовы jquery в 1 функцию

Question

У меня есть следующий jquery, который оживляет при наведении:

        $('#footerNetwork').hover(function(){
            $('#popupNetwork').animate({top:'-62px'},{queue:true,duration:500});
        }, function(){
            $('#popupNetwork').animate({top:'30px'},{queue:true,duration:500});
        });

        $('#footerPort').hover(function(){
            $('#popupPort').animate({top:'-62px'},{queue:true,duration:500});
        }, function(){
            $('#popupPort').animate({top:'30px'},{queue:true,duration:500});
        });

        $('#footerAirport').hover(function(){
            $('#popupAirport').animate({top:'-62px'},{queue:true,duration:500});
        }, function(){
            $('#popupAirport').animate({top:'30px'},{queue:true,duration:500});
        });

и т.д ...

как я могу объединить их во включенную функцию, которая распознает, какая ссылка была найдена (то есть: footerNetwork) и нацеливает соответствующий div на animate (popupNetwork) ?? спасибо!

Answer 1

Вы можете сделать что-то вроде этого:

var tops = { footerNetwork:'-80px', footerPort:'-62px', footerAirport:'-62px' };
$('#footerNetwork, #footerPort, #footerAirport').hover(function(){
  $('#'+this.id.replace('footer','popup')).animate({top: tops[this.id]}, 500);
}, function(){
  $('#'+this.id.replace('footer','popup')).animate({top:'30px'}, 500);
});

Если вы добавите класс к этим элементам, скажем class="footer", то вы можете изменить .hover() на $('.footer').hover(function(){, чтобы сделать его еще чище. Чтобы получить соответствующий элемент #popup_____, мы просто берем текущий идентификатор, например, footerNetwork и выполнение .replace(), чтобы получить идентификатор всплывающего окна. Объект tops предназначен для хранения различных верхних значений, поскольку они различаются.

Answer 2

Поскольку смещения не являются фиксированными, на самом деле невозможно получить один и тот же результат одним вызовом, но подобная функция сделает свое дело:

function hoverIt(name, topIn, topOut, duration)
    duration = (duration != undefined) ? duration : 500;

    $('#footer' + name).hover(function(){
        $('#popup' + name).animate({top: topIn + 'px'},
                            {queue: true, duration: duration});
    }, function(){
        $('#popup' + name).animate({top: topOut + 'px'},
                            {queue: true, duration: duration});
    });
}

Затем просто вызовите функцию для каждогоанимация:

hoverIt('Network', -80, 30, 300);
hoverIt('Port', -62, 30);
hoverIt('Airport', -62, 30);

Намного лучше, я думаю.Когда их будет много, вы можете использовать что-то вроде:

var hovers = [['Network', -80, 30, 300],
              ['Port', -62, 30],
              ['Airport', -62, 30]];

for (var i = 0; i < hovers.length; i++) {
    hoverIt(hovers[i][0], hovers[i][1], hovers[i][2], hovers[i][3]);
}

примечание: не проверено

Answer 3

Я предполагаю, что у вас есть класс foo для элементов, к которым вы хотите добавить поведение при наведении курсора.Тогда нужно просто следовать (кажущемуся) шаблону footer...:

$(document).ready( function(){
  $('.foo').hover( 
    function(){
      $('#popup' + this.id.substr(6,this.id.length-6) ).animate({...});
      //                          ^remove "footer" portion of id
    },
    function(){
      $('#popup' + this.id.substr(6,this.id.length-6) ).animate({...});
    }
  );
});

В зависимости от того, как структурирован ваш документ, вы также можете идентифицировать элементы «нижнего колонтитула ...» по их контейнеру, скореечем по классу.