Как мне обновить переменную в jQuery при наведении курсора? - PullRequest
Новая
       20

Как мне обновить переменную в jQuery при наведении курсора?

0 голосов
/ 26 сентября 2018

Просто интересно, как я могу высушить этот код, над которым я работаю, для панели навигации.Я анимирую strokeDashoffset, используя tweenlite (GSAP), каждый раз, когда пользователь наводит курсор на определенный элемент, обводка меняется.

В идеале я хотел бы иметь один tweenlite в нижней части функции и передавать переменную обводкитак меняется.Однако переменная обводки устанавливается только один раз и не изменяется.

Я прокомментировал tweenlite, которые действительно работают, но, очевидно, это не самое идеальное решение. 

    function navHover() {

    var stroke = 2300;
    $("#nav_home").hover(function() {
        stroke = 2300;
    });
    $("#nav_about").hover(function() {
        stroke = 2100;
        //TweenLite.to('#navline', 0.5, {strokeDashoffset: 2100});
        //TweenLite.to('#left3d', 0.5, {x: 200, transformOrigin:"0% 100%"});
    });
    $("#nav_skills").hover(function() {
        stroke = 1900;
        //TweenLite.to('#navline', 0.5, {strokeDashoffset: 1900});
        //TweenLite.to('#left3d', 0.5, {x: 400, transformOrigin:"0% 100%"});
    });
    $("#nav_contact").hover(function() {
        stroke = 1700;
        //TweenLite.to('#navline', 0.5, {strokeDashoffset: 1700});
        //TweenLite.to('#left3d', 0.5, {x: 600, transformOrigin:"0% 100%"});
    });

    console.log(stroke);
    TweenLite.to('#navline', 0.5, {strokeDashoffset: stroke});
    TweenLite.to('#left3d', 0.5, {x: 0, transformOrigin:"0% 100%"});
}

Большое спасибозаранее.

1 Ответ

0 голосов
/ 26 сентября 2018

Не быть СУХОЙ, возможно, не самая большая проблема с вашим кодом.Но давайте начнем с этого.

СУХОЙ означает не повторяться.Что на простом уровне означает: всякий раз, когда мне нужно снова запустить тот же код, а не помещать его там, где он мне нужен, я создаю функцию и вызываю эту функцию из каждого места, где я хочу ее запустить.
По сути, это простой вопрос запуска того же кода, но написания меньшего количества символов.

Иногда требуется запустить один и тот же код с немного разными значениями.Вот когда вы используете параметры.(Это ваш случай).

В других случаях вы хотите изменить вещи на другие элементы, основанные на элементе, который инициировал вызов функции.Вот когда вы используете this (грубое упрощение, но, в принципе, правильно).

Ваш код будет выглядеть так, без повторения: 

function tweenTo(offset=2300, x=0) {
  TweenLite.to('#navline', 0.5, {strokeDashoffset: offset});
  TweenLite.to('#left3d', 0.5, {x: x, transformOrigin:"0% 100%"});
}

function navHover() {

    $("#nav_home").hover(function() { tweenTo() });
    $("#nav_about").hover(function() { tweenTo(2100, 200) });
    $("#nav_skills").hover(function() { tweenTo(1900, 400) });
    $("#nav_contact").hover(function() { tweenTo(1700, 600) });

    tweenTo();
}

Я надеюсь, что всепока ясно.

Теперь, если вы вызываете эту функцию только один раз, когда ваша страница загружена, вероятно, все хорошо и то, что вы хотите, чтобы произошло.Обычно вы запускаете 

tweenTo(); // which means tweenTo(2300,0);

, когда страница загружена, а также привязывает запущенные события tweenTo() s к mouseenter и mouseleave для некоторых элементов на вашей странице, с конкретными значениями для каждого случая.

Давайте кратко рассмотрим, что на самом деле делает .hover().Это сокращенный метод.

Как в: это более короткая форма для написания более длинной функции для часто используемого сценария.
Это краткая форма для 

.mouseenter(function(){
  /* code run on mouseenter event */ 
}).mouseleave(function(){
  /* code run on mouseleave event */
})`

Эта функция предназначена для создания двух привязок:

  • от одного до mouseenter (первый параметр)
  • и от одного до mouseleave (второй параметр - по умолчанию первый параметр).

Если вы не дадите ему две функции, он автоматически будет предполагать, что вы хотите, чтобы одна и та же функция была привязана к обоим событиям.Это означает, что tweenTo() запускается, когда указатель мыши входит в элемент и , когда он покидает элемент, что может не соответствовать вашим ожиданиям.

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

Мое третье замечание было бы, если бы вы запускали эту функцию для события hover другого элемента, поскольку это было бы очень плохо, что могло привести к сбою вашей страницы.Но, поскольку вы сказали мне, что это не так, я не буду подробно останавливаться на этом.

...