Передача функции с параметром для зависания в jQuery

Question

Я новичок в jQuery, и мне кажется, что я пропущу что-то очень очевидное и фундаментальное, но я не могу полностью обвести вокруг него голову.

В любом случае, у меня было немного кода, который будет анимировать ширину обводки в более широком объеме, когда объект был парил над и она работала:

$(function() { 
    $("#wheel1").hover(grow1, shrink1); 
}); 

function grow1(evt) { 
    $("#wheel1").animate({'stroke-width':'100'},300); 
    $("#circle1container").css({'display':'block'}); 
    $("#circle1container").animate({'opacity':'1'},300); 
} 

function shrink1(evt) { 
    $("#wheel1").animate({'stroke-width':'55'},300); 
    $("#circle1container").animate({'opacity':'0'},300); 
} 

Но у меня было 10 других предметов, которые я хотел чтобы сделать это для, так что вместо того, чтобы копировать и вставить это еще 9 раз и изменить число 9 раз, я пытался закрепить его, и это не сработало:

$(function() { 
$("#wheel1").hover(grow("1"), shrink("1")); 
$("#wheel2").hover(grow("2"), shrink("2")); 
$("#wheel3").hover(grow("3"), shrink("3")); 
$("#wheel4").hover(grow("4"), shrink("4")); 
$("#wheel5").hover(grow("5"), shrink("5")); 
$("#wheel6").hover(grow("6"), shrink("6")); 
$("#wheel7").hover(grow("7"), shrink("7")); 
$("#wheel8").hover(grow("8"), shrink("8")); 
$("#wheel9").hover(grow("9"), shrink("9")); 
$("#wheel10").hover(grow("10"), shrink("10")); 

function grow(number) { 
var name = "#wheel" + number; 
$("#wheel" + number).animate({'stroke-width':'100'},300); 
$("#circle" + number + "container").css({'display':'block'}); 
$("#circle" + number + "container").animate({'opacity':'1'},300); 
} 

function shrink(number) { 
$("#wheel" + number).animate({'stroke-width':'55'},300); 
$("#circle" + number + "container").animate({'opacity':'0'},300); 
} 

}); 

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

http://jsfiddle.net/F4Yjj/5/ Это показывает объект, который я пытаюсь анимировать при наведении с зависанием, работающим для зеленой фигуры (первый бит кода в этом сообщении).

Answer 1

Вместо выбора колес с использованием идентификаторов, которые должны быть уникальными, дать каждому колесу класс «колеса», так что вы можете выбрать все из них сразу:

<path id="wheel10" class="wheel" .... /> 
<path id="wheel9" class="wheel" ... /> 
etc. 

Затем, вы можете выбрать все " колеса»с помощью JQuery и обратитесь к одному, который парил с помощью $(this) в ваших функциях:

$(function() { 
    $("path.wheel").hover(grow1, shrink1); 
}); 

function grow1() { 
    $(this).animate({'stroke-width':'100'},300); 
} 

function shrink1() { 
    $(this).animate({'stroke-width':'55'},300); 
} 

Скрипки: http://jsfiddle.net/F4Yjj/1/

E DIT: Используя этот метод, вам не нужно «evt» в ваших функциях. http://jsfiddle.net/F4Yjj/3/

EDIT: также для отображения другого элемента. Учитывая, что у вас есть другой физический элемент для каждого колеса (как показано на обновленной HTML), вы можете определить идентификатор наведен колеса и выберите другой элемент по его ID:

function grow1() { 
    var id=$(this).prop('id').split('_'); 
    $(this).animate({'stroke-width':'100'},300); 
    $("#circlecontainer_"+id[1]).fadeIn(300); 
} 

function shrink1() { 
    var id=$(this).prop('id').split('_'); 
    $(this).animate({'stroke-width':'55'},300); 
    $("#circlecontainer_"+id[1]).fadeOut(100); 
} 

Эта скрипка имеет круги для wheel1 и wheel2: http://jsfiddle.net/F4Yjj/7/

Вы также можете сконденсировать это, используя один центр круга для всех колес. После наведения, обновите текст круга соответствующими процентами, цветами и т. Д.

Answer 2

используйте класс вместо идентификатора с помощью селектора классов, который будет применяться ко всем применимым классам. В качестве побочного примечания я бы не использовал зависание, поскольку я считаю, что он был устаревшим в jquery 1.9.1 или 2 Вместо этого вы могли бы просто использовать mousein и mouseout.

что-то вроде:

$(document).ready(function(){ 
    $('body').on('mousein','.wheel',function(){ 
    $(this).animate({'stroke-width':'100'},300); 
    }); 

    $('body').on('mouseout','.wheel',function(){ 
    $(this).animate({'stroke-width':'55'},300); 
    }); 
}); 

, то просто убедитесь, что все ваши диски с идентификатором имеет дополнительный класс .wheel