jquery toggle bottom left to top right

Question

hello

i have got this script all works fine but i was wonder if its possible to toggle bottom left to top right

    $("a#slick-toggle").click(function() {
    $("#slickbox").animate({width: "toggle", 
                height: "toggle"}, 1000);
});

thank Gareth

Answer 1

http://api.jquery.com/animate/ has an example of movement. Top right can be set via css as top: 0px; right: 0px; so it would be something like:

.animate({
  top: 0,
  right: 0,
  height: 'toggle'
});

Answer 2

You can set the position as relative then also animate the left property, like this:

$("a#slick-toggle").click(function() {
  var sb = $("#slickbox").stop(true, true), w = sb.is(":visible") ? sb.width():0;
  sb.animate({width: "toggle", height: "toggle", left: w}, 1000);
});​

You can give it a try here, what this does is grab the .width() of the element and moves it that far to the left in the animation, giving the effect of it collapsing to the right, rather than the left. The .stop(true, true) portion is to prevent animation queue-up and that .width() is the appropriate value when going to access it (not a mid-animation width).

Answer 3

In order to do that, you can float your #slickbox to right!

JS

$(document).ready(function() {
  $("a#slick-toggle").click(function() {
    $("#slickbox").animate({width: "toggle",
                height: "toggle"}, 1000);
    return false;
  });
});

HTML Please note : float: right

<a href="#" id="slick-toggle">Clicked</a><br />
<div style="width: 25px; float: left;">
 <div id="slickbox" style="float: right;">Testt</div>
</div>

See Demo