JQuery помощь, необходимая при наведении

Question

Эй, ребята, по какой-то странной причине, я не могу заставить это работать ... Мне просто нужен простой эффект при наведении, где, если ссылка наведена, левый отступ меняется на определенные пиксели ..

jQuery("nav li ul li").hover(function() {
     var padding = parseInt(jQuery(this).find("> a").css("paddingLeft");
         var new_padding = (padding + 5);   
     jQuery(this).find("> a").stop(true,true).animate({ paddingLeft: new_padding},200);
     }, function() { jQuery(this).find("> a").animate({ paddingLeft: padding},200);}
);

Итак, выше, я просто пытаюсь сказать, переместите отступ влево на 5 больше, чем оригинал, и переместите его обратно к оригиналу, когда мышь не нажата. Вышесказанное продолжает двигаться вправо с отступами и не возвращается по какой-то причине ... Я знаю, что упускаю что-то простое ...

Спасибо ...

Answer 1

Я бы настоятельно рекомендовал вам использовать + = и - = возможности анимации в jQuery для добавления и удаления фиксированной суммы из отступов. Таким образом, вы можете сделать все намного проще, фактически не выбирая значение отступа или не отслеживая что-либо в переменных. См. http://api.jquery.com/animate/ для примеров. Использование этого также решит проблему с областью видимости, которую вы имеете с переменной new_padding, потому что она вам больше не понадобится.

Тогда я не думаю, что find ("> a") обязательно делает то, что вы хотите. Если вы просто хотите найти теги «a», являющиеся потомками нависшей надписи, то вам просто нужно найти («a»). Это найдет потомков всех селекторов совпадений в первом вызове, которые являются тегами "a".

Я думаю, вы можете использовать что-то вроде этого:

jQuery("nav li ul li").hover(
     function() {
         jQuery(this).find("a").stop(true,true).animate({paddingLeft: "+=5"},200);
     }, 
     function() { 
         jQuery(this).find("a").stop(true, true).animate({paddingLeft: "-=5"},200);
     }
);

Вы можете увидеть, как это работает здесь в этой демонстрации кода: http://jsfiddle.net/jfriend00/9YQaV/

Answer 2

Без запуска вашего кода, я собираюсь догадаться, что вторая функция выдает ошибку и никогда не будет выполнена. Вы определили padding как локальную переменную в функции first , но вторая функция не знает об этом. Он ищет padding в своей области видимости, не находит его, ищет его в глобальной области видимости, не находит его и выдает исключение.

Запустите Firebug в Firefox, чтобы узнать, прав ли я ... Если да, у вас есть пара вариантов:

1. Сделать padding глобальным. Вы должны быть в состоянии сделать это, просто удалив часть var из ее объявления. Но глобальные переменные довольно условны, и они будут полагаться на функции, которые зависят от их вызова в ожидаемом порядке (in1 -> out1 -> in2 -> и т. Д.), И, хотя это, вероятно, не гарантируется.
2. Перезагрузите свойство margin из элемента в каждой функции. Это то, что я бы сделал, даже если это менее эффективно.

(линия прерывателя, чтобы заставить SO отформатировать это ...)

$("nav li ul li").hover(
    function() {$(this).find("> a").animate({ paddingLeft: load_padding() + 5}, 200);},
    function() {$(this).find("> a").animate({ paddingLeft: load_padding() - 5}, 200);}
)

Надеюсь, это поможет!

PS: Надеюсь, с этим форматом все в порядке - этот предварительный просмотр убивает его ...

PPS: Это не так, но я понял это.

Answer 3

Прежде всего, здесь вам не хватает закрывающей скобки:

var padding = parseInt(jQuery(this).find("> a").css("paddingLeft");

, и вы должны всегда предоставить аргумент radix для parseInt:

var padding = parseInt(jQuery(this).find("> a").css("paddingLeft"), 10);

Тогда у вас проблема с областью действия padding.Вы объявляете padding в первом аргументе функции hover, но пытаетесь использовать его в первой и второй функциях;В результате animate в функции mouseout ничего не делает, потому что там не определено padding.

Если вы поставите var padding; вне функций наведения:

var padding;
jQuery("nav li ul li").hover( //...

Вы получите лучшие результаты.