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＃front-page-slide具有固定的宽度和高度，隐藏了溢出。

我想要实现的是当用户点击＃slide-click时，将内部＃滑块面板向上移动320px。

我已经让这个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>');    

    });
   });

我已经尝试了我能想到的一切，ids，类，冲突，但是我得出的结论是，在尝试这样做的过程中，有一些根本性的愚蠢。

任何帮助都会很棒！

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。

Jquery动画只在第一次点击时工作

1 个答案: