Problems with jQuery slider: two buttons confuse state

I created a slider with two possible buttons: from one to .toggle, this one is always displayed, and then .click, which is displayed only when the slide, so I wanted it to close. the problem is when you open with .toggle and close with .click, then try re-opening with the original button .toggle. at this moment he needs 2 clicks of the mouse.

<script type="text/javascript">

  $(document).ready(function(){

    $(".profile_slide_btn").toggle(

     function(){
       $("#sliding_header").animate({ 
         top: "0px"
       }, 300 );
     }, 

     function(){
      $("#sliding_header").animate({ 
         top: "-600px"
       }, 300 );
  });

 $(".profile_slide_btn2").click(

     function(){
       $("#sliding_header").animate({ 
         top: "-600px"
       }, 300 );
     });
  });

</script>

Thanks for any help!

+3
source share
2 answers

, , , , , .click, , .toggle, .

, , , .toggle.

. - ( , , , ):

<script type="text/javascript">

    $(document).ready(function(){

        $(".profile_slide_btn").click(
            function(){
                if ($("#sliding_header").css("top") == "0px") {
                    hideHeader();
                } else {
                    showHeader();
                }
            });

        $(".profile_slide_btn2").click(hideHeader);

        function showHeader() {
            $("#sliding_header").animate({ top: "0px" }, 300 );
        }

        function hideHeader() {
            $("#sliding_header").animate({ top: "-600px" }, 300 );
        }
    });

</script>
+1

, .toggle , .

  • google: 0px
  • : -600px
  • Toggle , , : -600px

, , -600px 0, , .

0

Source: https://habr.com/ru/post/1726495/


All Articles