CODEWITHSUNDEEP
jqueryjquery-uijquery-animate
Martijn
Martijn

Reputation: 24789

How to slide a div from the top right corner with jquery?

I have some hidden divs and when a button is clicked I want to show a div.

I've seen slideDown but that's not exactly what I want. I want that the hidden div grows from nothing to it's original size and doing this from the top right corner of the (hidden) div.

Upvotes: 4

Views: 8169

Answers (5)

Joe Johnson
Joe Johnson

Reputation: 1824

Not sure if this is a hack. But, I just discovered I got what I (and you) want without jQuery UI (and I removed the library immediately from my yeoman/bower build):

var isLeft = !$myRelorAbsDiv.position().left; // 2-col layout, with floated divs
$myRelorAbsDiv.css(isLeft? "left":"right", 0).show("slow");

In a 2-col (based on width of container only... all inner divs just floated left) layout, the above code causes (due to css positioning right before the show method invocation) the animation to happen from the right when in right column (left animation, if in the left, 1st column). I almost brought in jquery-ui to do this! blah :)

Upvotes: 0

Mahesh
Mahesh

Reputation: 320

Try this one

    <html>
    <head>
        <style type="text/css">
            #slideDiv{display:none;width:400px;height:300px;position:absolute;top:0;right:0;background:#ff0000;color:#fff;}
        </style>
    </head>
    <body>
        <div id="slideDiv"> </div>
        <button id="startSlide">Start Slide</button>
        <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function(){
                $('#startSlide').on('click', function(){
                    $('#slideDiv').toggle('slow', function() { });
                })
            })
        </script>
    </body>
</html>

I hope this helps.

Upvotes: 0

bipen
bipen

Reputation: 36531

grows from nothing to it's original size and doing this from the top right corner of the (hidden) div.

i think toggle does what you need...

try this

html

<div id="test"></div>
<button id="button">click</button>

jquery

$(function(){
  $("#button").click(function(){
      $('#test').toggle('slow');
});
});

if incase you don't need any animation in second click then you can use one()

$(function(){
  $("#button").one('click',function(){
      $('#test').toggle('slow');
});
});

fiddle here

Upvotes: 1

Andreas Eriksson
Andreas Eriksson

Reputation: 9027

$("#box").show('size', { origin: ["top", "right"] }, 2000);

Use .toggle() with the same parameters instead if you want to be able to hide it with the same event.

First parameter is the effect we're using, size. Second parameter is an object of options specific to this effect, of which we only use origin to specify where it should resize from. Third parameter is the duration in milliseconds, which you can change at your leisure.

Live example: http://jsbin.com/uwonun/1

Upvotes: 9

notquiteamonad
notquiteamonad

Reputation: 1169

This isn't entirely what you want, but it could maybe be modified:

You could use the jQuery UI .effect method on your dive with the "size" parameter. This is customizable in the options and you should be able to work out how here:

http://jqueryui.com/effect/

Good Luck, and I hope this helps!

Upvotes: 0

Related Questions