8

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);
  });
});

#nav最初は画面の外側に部分的に配置されていたdivが、div#arrow_containerをクリックしたときに下に移動するようにします。次に、#arrow_containerもう一度クリックする#navと、元の位置に移動します。

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

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

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

4

2 に答える 2

15

これを試して：

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

于 2013-03-12T18:57:26.910 に答える
4

私にとっては 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;
});
于 2013-09-06T15:24:21.210 に答える