web-dev-qa-db-ja.com

jQueryクリックトグルアニメーション

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元の位置に移動します。

現時点では、これは発生しません。問題とは何か、どうすれば修正できるか教えていただけますか？

編集： いくつかのcssを含むコード付きのjsfiddle

編集2：問題は解決されたようです。また、ユーザー名を忘れて回答が削除された人にも感謝しますが、彼にはいくつかのすばらしいヒントがありました。ありがとうございました！

jqueryjquery-animate
8
Michaël van de Weerd

これを試して：

$("#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/

15
tsuensiu

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;
});
4
Timotheus Triebl