Pregunta jQuery haga clic en la animación de alternar


Estoy tratando de aprender a usar jQuery, y me encontré con un problema. Primero, le mostraré la parte del código que causa el problema.

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

Quiero el div #nav, que inicialmente se coloca parcialmente fuera de la pantalla, para moverse hacia abajo cuando div #arrow_container se hace clic. Entonces cuando #arrow_container se hace clic de nuevo quiero #nav para moverse hacia arriba, a su posición original.

Por el momento, esto no sucede. ¿Me puede decir cuál es el problema y cómo puedo solucionarlo?

EDITAR: un jsfiddle con el código, incluidos algunos css

EDIT 2: El problema parece estar resuelto. También gracias a alguien cuyo nombre de usuario que olvidé y respuesta ha sido eliminado, ¡pero tenía algunos consejos geniales! ¡Gracias!


8
2018-03-12 17:01


origen


Respuestas:


Prueba esto:

$("#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
2018-03-12 18:57



para mí eso no funcionó al 100% tuve que editar un evento stop () antes de cada animación. asi que:

$("#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
2017-09-06 15:24