Now the block leaves to the left edge, then reaches the right.
It is necessary that he went to the middle and left completely back to the right.
I can not find where I nakosyachil?

$("body").on("click", ".hamburger", function(e) { e.preventDefault(); $(this).find('.first').toggleClass("openfirst"); $(this).find('.third').toggleClass("openthird"); var $marginLefty = $(this).next(); var $dlinna = $marginLefty.outerWidth(); console.log(parseInt($marginLefty.css('marginLeft'), 10)); $marginLefty.animate({ marginLeft: parseInt($marginLefty.css('marginLeft'), 10) == 0 ? $dlinna : 0 }); }); 
 .inner { width: 50%; height: 30px; margin-left: 1000px; background: #ccc; transition: 0.4s; } /*--------------*/ .hamburger { width: 26px; float: right } .navicon { background: grey; display: block; height: 1px; position: relative; //transition: background .2s ease-out; width: 21px; margin: 3px; transition: 0.2s; } .openfirst { margin-bottom: 5px; } .openthird { margin-top: 5px; } .wrapper { width: 500px; height: 250px; border: 1px solid grey; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <div class="wrapper"> <div class="hamburger"><span class="navicon first"></span><span class="navicon"></span><span class="navicon third"></span> </div> <div class="inner"></div> </div>

JsFiddle link

    2 answers 2

    Fix the code

     $marginLefty.animate({ marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ? $dlinna : 0 });

    On

     $marginLefty.animate({ marginLeft: parseInt($marginLefty.css('marginLeft'), 10) == 1000 ? ($dlinna / 2) : 1000 }); 

     $("body").on("click", ".hamburger", function(e) { e.preventDefault(); $(this).find('.first').toggleClass("openfirst"); $(this).find('.third').toggleClass("openthird"); var $marginLefty = $(this).next(); var $dlinna = $marginLefty.outerWidth(); console.log(parseInt($marginLefty.css('marginLeft'), 10)); $marginLefty.animate({ marginLeft: parseInt($marginLefty.css('marginLeft'), 10) == 1000 ? ($dlinna / 2) : 1000 }); }); 
     .inner { width: 50%; height: 30px; margin-left: 1000px; background: #ccc; transition: 0.4s; } /*--------------*/ .hamburger { width: 26px; float: right } .navicon { background: grey; display: block; height: 1px; position: relative; //transition: background .2s ease-out; width: 21px; margin: 3px; transition: 0.2s; } .openfirst { margin-bottom: 5px; } .openthird { margin-top: 5px; } .wrapper { width: 500px; height: 250px; border: 1px solid grey; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <div class="wrapper"> <div class="hamburger"><span class="navicon first"></span><span class="navicon"></span><span class="navicon third"></span> </div> <div class="inner"></div> </div>

      In the ternary operator, an incorrect check, for example, if len == 0 and then make it zero?

       var len = parseInt($marginLefty.css('marginLeft'),10); marginLeft: len == 0 ? len : 0

      It works like this: https://jsfiddle.net/5jaug7ju/

      html

       <div class="wrapper"> <div class="hamburger"> <span class="navicon first"></span> <span class="navicon"></span> <span class="navicon third"></span> </div> <div class="inner"></div> </div>

      Js

        $("body").on("click", ".hamburger", function(e) { e.preventDefault(); $(this).find('.first').toggleClass("openfirst"); $(this).find('.third').toggleClass("openthird"); var $marginLefty = $(this).next(); var $dlinna= $marginLefty.outerWidth(); console.log('dlinna ' + $dlinna); var len = parseInt($marginLefty.css('marginLeft'),10); console.log('len '+len); $marginLefty.animate({ marginLeft: len == 0 ? 1000 : 0 }); len = parseInt($marginLefty.css('marginLeft'),10); console.log('len '+len); });

      CSS

        .inner { width: 50%; height: 30px; margin-left: 1000px; background: #ccc; /*transition:0.4s;*/ } /*--------------*/ .hamburger{width: 26px;float:right} .navicon { background: grey; display: block; height: 1px; position: relative; //transition: background .2s ease-out; width: 21px; margin:3px; transition:0.2s; } .openfirst{ margin-bottom:5px; } .openthird{ margin-top:5px; } .wrapper{ width:500px; height:250px; border:1px solid grey; }