1

I have HTML like:

a#clickme{width:20px; height:20px; background:#444; cursor:pointer;display:block; text-indent:-9999px}
div.mydiv{width:200px; height:200px;border:2px solid #666; position:fixed; left:-200px}

<a id='clickme' href='#'>Click Me</a>
<div class='mydiv'></div>

Now, I want use click on clickme to open mydiv class from left to right. and click again to close it.

How can I use Jquery to do that?

vinzee
  • 17,022
  • 14
  • 42
  • 60
Hai Tien
  • 2,556
  • 7
  • 32
  • 49
  • Have a look at the jquery docs (http://api.jquery.com/fadeIn/). There is an example at the end – drkunibar Apr 06 '14 at 07:46
  • Possible duplicate of http://stackoverflow.com/questions/521291/jquery-slide-left-and-show ... search is a great friend, eh? –  Apr 06 '14 at 07:49
  • @drkunibar:I want it like toggle but it slide from left to right only – Hai Tien Apr 06 '14 at 07:49
  • 1
    @JeremyMiller For toggeling you can have a look at the jquery doc here: http://api.jquery.com/fadeToggle/ . You need to change the options for `fadeToggle` like you want – drkunibar Apr 06 '14 at 07:59
  • @drkunibar Yes, I know, but fading wasn't in the request. –  Apr 06 '14 at 08:02

1 Answers1

4

You can animate the 'left' attribute using jQuery:

$('#clickme').click(function() {
    var $slider = $('.mydiv');
    $slider.animate({
       left: parseInt($slider.css('left'),10) == -200 ?
       0 : -200
    });
});

Alternatively, use outerWidth():

$('#clickme').click(function() {
    var $slider = $('.mydiv');
    $slider.animate({
       left: parseInt($slider.css('left'),10) == -$slider.outerWidth() ?
       0 : -$slider.outerWidth()
    });
});

Check out this demo

Michael Vangelovski
  • 88
  • 1
  • 4