Как я могу создать функцию jquery, включающую 3 div?

Question

Мне нужна помощь в создании функции, которая делает то же самое для выбранных элементов.

У меня есть # design1 # design1servicetext и # design1servicebutton.

Код:

//Service hover//
$('#design1').mouseenter(function (){
    $('#design1servicetext').css('background-position', '0 -91px')  
    $('#design1servicebutton').css('background-position', '0 -33px')
    })
               .mouseleave(function (){
    $('#design1servicetext').css('background-position', '0 0px')
    $('#design1servicebutton').css('background-position', '0 0px')});
//Service hover end//

Как я могу создать функцию, в которой мне нужно выбрать 3 деления для анимации?

Мне нужна такая функция, как

animatebg('#design1','#design1servicetext','#design1servicebutton');

Может кто-нибудь помочь мне?Я перепробовал так много учебников по функциям, но ни один из них не помог мне.Заранее большое спасибо!

Answer 1

Хм, попробуйте это:

function animatebg( jq1, jq2, jq3 ) {
    $('#'+jq1).mouseenter(function() {
        $('#'+jq2).css('background-position', '0 -91px')  
        $('#'+jq3).css('background-position', '0 -33px')
    }).mouseleave(function() {
        $('#'+jq2).css('background-position', '0 0px')
        $('#'+jq3).css('background-position', '0 0px')});
}

Answer 2

function animatebg(param1,param2,param3){
    $("#"+param1).mouseenter(function (){
    $("#"+param2).css('background-position', '0 -91px')  
    $("#"+param3).css('background-position', '0 -33px')
    })
               .mouseleave(function (){
    $("#"+param2).css('background-position', '0 0px')
    $("#"+param3).css('background-position', '0 0px')});
}

Answer 3

Я выполнил функцию бесконечного аргумента, поэтому у вас может быть меньше или больше селекторов, см. Ссылку для полного примера http://jsfiddle.net/AcUCm/

Здесь с моей функцией:

function animatebg() {
        for (var i = 0; i < arguments.length; i++) {
            var val = arguments[i].toString();

            $(val).live('mouseenter', function() {
                $(this).css('background-position', '0 -91px')
                $(this).css('background-position', '0 -33px')
            }).live('mouseleave', function() {
                $(this).css('background-position', '0 0px')
                $(this).css('background-position', '0 0px')
            });

        }
}

Использование(документ готов)

$(function() {
animatebg('#design1', '#design1servicetext', '#design1servicebutton');
});