Jquery анимация работает только на первом щелчке

Question

Поэтому у меня есть следующие основные HTML

<div id="front-page-slide"> 

    <div id = "slider-panel"> 

     Social Logins here 

    <div id = "slide-now-text"> 
     <span id="slide-click">Sign-in using email <i class="icon-chevron-sign-up"></i></span> 
    </div> 

     Email login here <- this part resides outside of the #front-page-slider wrapper until the user clicks on the above span 

    </div> 

</div> 

контейнер DIV # передняя страница слайд имеет фиксированную ширину и высоту, с переливом скрытым.

Что я хочу достичь, так это перемещение внутренней панели слайдера # на 320 пикселей, когда пользователь нажимает # слайд-клик.

Ive получил этот jquery, работающий нормально при первом щелчке, однако я не могу на всю жизнь заставить его вернуться в исходное положение.

jQuery(document).ready(function(){ 
    jQuery("#slide-click").click(function() { 
     jQuery("#slider-panel").animate({"margin-top":"-320px"}, 1000); 
     jQuery("#slide-now-text").html('<span id="slide-click-back"><i class="icon-chevron-sign-down"> Go back </i></span>'); 

    }); 



    jQuery("#slide-click-back").click(function() { 
     jQuery("#slider-panel").animate({"margin-top":"320px"}, 1000); 
     jQuery("#slide-now-text").html('<span id="slide-click"><i class="icon-chevron-sign-down"> sign up </i></span>');  

    }); 
    }); 

Ive пытался все, что я могу думать, ид, классы конфликтов вы назвать его, но IVE пришел к выводу, есть что-то принципиально глупо в том, как им пытаются это сделать.

Любая помощь будет замечательной!

Answer 1

использовать только по щелчку здесь -

jQuery("html").on('click', '#slide-click', function() { 
    jQuery("#slider-panel").animate({"margin-top":"-320px"}, 1000); 
    jQuery("#slide-now-text").html('<span id="slide-click-back"><i class="icon-chevron-sign-down"> Go back </i></span>'); 

}); 

jQuery("html").on('click', '#slide-click-back', function() { 
    jQuery("#slider-panel").animate({"margin-top":"320px"}, 1000); 
    jQuery("#slide-now-text").html('<span id="slide-click"><i class="icon-chevron-sign-down"> sign up </i></span>');  

}); 

почему по щелчку? потому что #slide-click-back динамически загружается, когда вы нажимаете #slide-click, и вам нужно использовать функцию jquery on click, если вы хотите любое событие при нажатии на динамически загружаемый контент.