Question

我有一个徽标，当单击菜单时，字母T和H以及字母动画相距约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)
 });

上面的代码只运行一次。点击一下，现在我尝试使用.toggle（），但是当我这样做时，它会立即用动画隐藏我的菜单..而且我再也找不到menubutton了。

（这是我尝试用于切换的无效代码）

$(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：

此方法签名在jQuery 1.8中已弃用，并在jQuery 1.9中删除。 jQuery还提供了一个名为.toggle（）的动画方法，可以切换元素的可见性。

因为您使用的是比1.8更新的jQuery版本，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/

不知道如何使用.toggle（）

1 个答案: