javascript - 不知道如何使用 .toggle()

Question

我有一个 Logo ，当单击菜单时，字母 T 和 H 以及字母 animatie 彼此相距约 400px。当他们制作动画时，导航会出现:eas-in，但是当我再次单击汉堡菜单时，我希望导航以相同的动画关闭。我尝试了不同的 .toggle() 函数，但我不知道如何使其工作。这就是它现在的样子，我只是不知道如何切换菜单。

有没有人知道如何做到这一点，或者有没有人有任何建议？非常感谢!

(这是动画和淡入导航的工作代码)

$( "#myMenu" ).click(function() {
  $( ".letterT" ).animate({
    marginLeft: "-200px",
    borderWidth: "10px"
  }, 1000 );
});

$( "#myMenu" ).click(function() {
  $( ".letterH" ).animate({
    marginLeft: "400px",
    position: "absolute",
    borderWidth: "10px"
  }, 1000 );
});

$( "#myMenu" ).click(function() {
  $( "nav" ).fadeIn( 2000)
 });

上面的代码运行一次。单击 1 次，现在我尝试使用 .toggle() 但当我这样做时，它会立即用动画隐藏我的菜单..而且我再也找不到菜单按钮了。

(这是我尝试用于切换的无效代码)

$(function(){
    $('#myMenu').toggle(function(){
        $( ".letterT" ).animate({
            marginLeft: "-200px",
          }, 1000 );
        $( ".letterH" ).animate({
        marginLeft: "400px",
        position: "absolute",
      }, 1000 );

//the code above should start the animation,
//and below it should animate back when I click on the menu

    }, function(){
        $( ".letterT" ).animate({
            marginLeft: "200px",
          }, 1000 );
        $( ".letterH" ).animate({
        marginLeft: "-400px",
        position: "absolute",
      }, 1000 );
    });
});

Answer 1

注意:您加载了三倍的 jQuery 库。您只需要一次。

您尝试做的是toggle()过去使用的“旧”方式。您可以阅读the API description :

This method signature was deprecated in jQuery 1.8 and removed in jQuery 1.9. jQuery also provides an animation method named .toggle() that toggles the visibility of elements.

因为您使用的 jQuery 版本高于 1.8，所以 toggle() 函数仅显示/隐藏一个元素。

您有多种选择:您可以使用 plugin ，但我喜欢Dom's solution它使用变量来跟踪状态。

您的 JavaScript 代码将变为:

var oddClick = true; // <-- The variable to keep track of the state
$("#myMenu").click(function () {
    if (oddClick) {h
        $(".letterT").animate({
            marginLeft: "-200px",
            borderWidth: "10px"
        }, 1000);
        $(".letterH").animate({
            marginLeft: "400px",
            position: "absolute",
            borderWidth: "10px"
        }, 1000);
        $("nav").fadeIn(2000);
    }
    else { // We put it back as it was before.
        $(".letterT").animate({
            marginLeft: "0",
        }, 1000 );
        $(".letterH").animate({
            marginLeft: "-0.3em",
            position: "absolute",
        }, 1000 );
        $("nav").fadeOut(500);
    }
    oddClick = !oddClick; // We toggle the variable everytime the button is clicked.
});

我创建了一个 jsFiddle 来向您展示:http://jsfiddle.net/grd7z1g8/1/