How to Slide right to left JQuery HTML CSS

Question

 $(document).ready(function() { $("#One").click(function() { $("#Two").animate({ width: 'toggle' }, -10); }); }); 

 <script src="jquery-3.2.1.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery- 3.2.1.min.js"></script> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="http://jquery- ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js"></script> <script src="http://jquery- ui.googlecode.com/svn/tags/latest/ui/jquery.effects.slide.js"> </script> <script> </script> <div id="One" style="width:50px;height:200px;background- color:yellow;position:relative;top:300px;left:600px;">One</div> <div id="Two" style="width:200px;height:200px;background- color:black;position:relative;top:100px;left:400px;">Two</div> 

Above is the code, my problem exactly is that I can't get it to slide normally. When I click on it it disappears then comes back on the second click. I just want it to slide normally.

Answer 1

Try adding this::

$(document).ready(function() {
  $("#One").click(function() {
    $("#Two").animate({
      left: '400px'
    });
  });
});