jQuery点击切换动画

Posted 2023-05-08

【中文标题】jQuery点击切换动画

【英文标题】：jQuery click toggle animation

【发布时间】：2013-02-28 08:02:41

【问题描述】：

我正在尝试学习如何使用 jQuery，但我偶然发现了一个问题。首先，我将向您展示导致问题的代码部分。

html

<div id="nav">
<div id="button"><p class="scroll" onclick="location.href='#ed';">Education</p></div>
<div id="button"><p class="scroll" onclick="location.href='#wxp';">Work Experience</p></div>
<div id="button"><p class="scroll" onclick="location.href='#oact';">Other Activities</p></div>
<div id="button"><p class="scroll" onclick="window.open('cv.pdf','mywindow');">View as PDF</p></div>
<div id="arrow_container"><div class="arrow" id="down"></div></div>

jQuery

$(document).ready(function()
$("#arrow_container").toggle(
  function () 
    $("#nav").animate(marginTop:"0px", 200);
      , function () 
    $("#nav").animate(marginTop:"-100px", 200);
  );
);

我希望 div #nav（最初部分位于屏幕之外）在单击 div #arrow_container 时向下移动。然后当再次点击#arrow_container 时，我希望#nav 向上移动到其原始位置。

目前，没有发生这种情况。您能告诉我问题是什么以及如何解决吗？

编辑：a jsfiddle with the code, including some css

编辑 2：问题似乎已解决。还要感谢我忘记并回答的用户名已被删除的人，但他有一些很棒的提示！谢谢！

【问题讨论】：

您能否尝试在 jsfiddle 中重新创建您的问题，或提供一些 CSS 或其他内容，以便我们了解您如何定位 #nav？

另外，如果你开始学习 jQuery，我建议不要使用 toggle，因为它不再包含在最新版本的 jQuery 中。

@A.V 不，1.8 从 1.9 开始贬值，不再包括在内。 api.jquery.com/toggle-event

这不完全正确，有两个different implementations 使用.toggle()，toggle-event 已弃用，而标准toggle 仍然完全支持。

@idrumgood 我在主帖中添加了一个 jsfiddle，我希望它能解决问题。

【参考方案1】：

试试这个：

$("#arrow_container").click( function(event)
    event.preventDefault();
    if ( $(this).hasClass("isDown") ) 
        $("#nav").stop().animate(marginTop:"-100px", 200);                            
     else 
        $("#nav").stop().animate(marginTop:"0px", 200);
    
    $(this).toggleClass("isDown");
    return false;
);

http://jsfiddle.net/us6sohyg/5/

【讨论】：

你也可以在 if 语句后使用 toggleClass('isDown') 来移除添加和移除类冗余

@BenSewards 谢谢，我更新了我的代码。还添加了 Timotheus Triebl 的建议。

【参考方案2】：

对我来说，没有达到 100% 的效果，我必须在每次动画之前编辑一个 stop() 事件。 所以：

$("#arrow_container").click( function(event)
event.preventDefault();
if ($(this).hasClass("isDown") ) 
    $("#nav").stop().animate(marginTop:"0px", 200);          
    $(this).removeClass("isDown");
 else 
    $("#nav").stop().animate(marginTop:"-100px", 200);   
    $(this).addClass("isDown");

return false;
);