Question

只是想知道如何使正在为导航栏工作的这段代码枯竭。我正在使用Tweenlite（GSAP）为strokeDashoffset设置动画，每当用户将鼠标悬停在特定元素上时，笔触都会更改。

理想情况下，我想在函数的底部放置一个tweenlite，并传递stroke变量以使其发生变化。但是，stroke变量只能设置一次，并且不会更改。

我已经注释掉了确实有效的补间彩，但显然这不是最理想的解决方案。

    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%"});
}

非常感谢。

Answer 1

不进行DRY可能不是代码的最大问题。但是，让我们开始吧。

DRY表示不要重复自己。从简单的角度讲，它可以翻译为：每当我需要再次运行相同的代码时，而不是将其放置在需要的位置时，我将创建一个函数，并从每个要运行它的位置调用该函数。 br /> 从本质上讲，这是运行相同代码但编写更少字符的简单问题。

有时，您希望以略有不同的值运行相同的代码。那就是您使用参数的时候。（您的情况是这样）。

在其他时候，您希望根据启动该函数调用的元素将其更改为其他元素。那是您使用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()和mouseenter事件与运行的mouseleave绑定在一起，并为每种情况指定了特定的值。

让我们快速了解.hover()的实际作用。这是一种简写方法。

如图所示：它是一种较短的形式，用于为常用方案编写较长的函数。
这是

的缩写

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

此函数旨在进行两个绑定：

一个到mouseenter（第一个参数）
和一个mouseleave（第二个参数-默认为第一个参数）。

如果您不给它两个函数，它将自动假定您要在两个事件上绑定相同的函数。这意味着tweenTo()在鼠标指针进入元素和离开元素时运行，这可能不是您想要的。

如果只希望在鼠标进入时运行该功能，请绑定到mouseenter。特别是如果您的元素相邻并且当鼠标进入其中一个元素时，它也会离开另一个元素，因为这意味着您正在同时运行补间动画，而这可能并不是您想要的。

我的第三点是，如果您在另一个元素的hover事件上运行此函数，那将是非常糟糕的事情，有可能使您的页面崩溃。但是，既然您告诉我不是这种情况，我就不详细介绍了。

如何在悬停时更新jQuery中的变量？

1 个答案: