Question

我曾尝试使用.toggle在动画之间切换，但它没有效果......例如，

$('.login').toggle(
    function()
       {
          $('#panel').animate({
          height: "150", 
          padding:"20px 0",
          backgroundColor:'#000000',
          opacity:.8
          }, 500);
       },
       function()
       {
          $('#panel').animate({
          height: "0", 
          padding:"0px 0",
          opacity:.2
          }, 500);
   });

所以我转而使用带有类的if语句，但是我无法弄清楚如何阻止动画再次回到原来的位置。

$("#navigation").click(function() {
    $("#navigation").animate( {
        top: "0px"
    }, 200);
    $("#navigation").addClass("here");
});

$("#navigation").click(function() {
    if($("#navigation").hasClass("here") ) {
        $("#navigation").animate( {
        top: "-180px"
    }, 200);
    }
});

Answer 1

现在，.toggle(fn, fn)已从最新的jQuery库中删除，因此无法正常工作。还有其他方法可以做到这一点。您可以使用.toggleClass()并将css的top属性设置为0到-180：

$("#navigation").click(function() {
    $(this).toggleClass('here'); // toggle it here
    $("#navigation").stop(true, true).animate( {
      top: $(this).css('top') == "0px" ? "-180px" : "0px"; // toggle the top here
    }, 200);
});

另一个建议是使用.stop(true, true)来阻止多次点击的奇怪行为。

Answer 2

您需要使用单击处理程序，然后根据类的呈现设置top值。

在您的情况下，每次点击都会触发两个处理程序，因此首先将顶部设置为0，然后设置为-180

$("#navigation").click(function () {
    $(this).stop().animate({
        top: $(this).hasClass("here") ? '-180px' : "0px"
    }, 200).toggleClass("here");
});

Answer 3

1。如果您使用hasclass，那么它就像下面一样：

 $("#navigation").click(function () {
        if ($("#navigation").hasClass("here")) {
            $("#navigation").animate({
                top: "-180px"
            }, 200);
        }
        else {
            $("#navigation").animate({
                top: "0px"
            }, 200);
            $("#navigation").addClass("here");
        }
    });

2。并toggleclass：

$("#navigation").click(function() {
$(this).toggleClass('here');
$("#navigation").animate( {
  top: $(this).css('top') == "0px" ? "-180px" : "0px";
}, 200);
});

注意：远离toggleClass，因为它会在使用之前添加了解状态的错误来源。

如何使用.hasClass正确切换位置？

3 个答案: