I'm trying to make a div appear proportionally in their width and height at the same time both. And the same to disappear, but I can not do it. Are there any other way better to do it? Thanks.

/

JAVASCRIPT

$('a.close').click(function() { 

        $('#box').hide("scale",{percent: 0, direction: 'vertical', origin: ['bottom','left']},1000);       
        $('#box').hide("scale",{percent: 0, direction: 'vertical', origin: ['top','right']},1000);

});
//});
$('#show').click(function() {


        $('#box').show("scale",{percent: 100, direction: 'vertical', origin: ['bottom','left']},1000);       
        $('#box').show("scale",{percent: 100, direction: 'vertical', origin: ['top','right']},1000);

});

I'm trying to make a div appear proportionally in their width and height at the same time both. And the same to disappear, but I can not do it. Are there any other way better to do it? Thanks.

http://jsfiddle/693xw/

JAVASCRIPT

$('a.close').click(function() { 

        $('#box').hide("scale",{percent: 0, direction: 'vertical', origin: ['bottom','left']},1000);       
        $('#box').hide("scale",{percent: 0, direction: 'vertical', origin: ['top','right']},1000);

});
//});
$('#show').click(function() {


        $('#box').show("scale",{percent: 100, direction: 'vertical', origin: ['bottom','left']},1000);       
        $('#box').show("scale",{percent: 100, direction: 'vertical', origin: ['top','right']},1000);

});

• javascript
• jquery
• html
• css
• show-hide

4 Answers 4

Here is the fiddleDemo

 $('a.close').click(function() { 
    $('#box').hide("scale",
        {percent: 0, direction: 'both', origin: ['bottom','middle']},1000);       
});

$('#show').click(function() {
    $('#box').show("scale",
        {percent: 100, direction: 'vertical', origin: ['bottom','middle']},1000);       
});

You only need to change the direction parameter to 'both':

http://jsfiddle/693xw/7/

    $('a.close').click(function() { 
        $('#box').hide("scale",
            {percent: 0, direction: 'both', origin: ['middle','middle']},1000);       
    });

    $('#show').click(function() {
        $('#box').show("scale",
            {percent: 100, direction: 'vertical', origin: ['bottom','left']},1000);       
    });

There are other ways to achieve this: You could describe this scaling effect as a CSS animation in a CSS file rather than achieve it using jQuery.

Edit: http://api.jqueryui./scale-effect/ has not only jQuery documentation on this effect, but includes two demos. The first one is essentially just "scale" with no other parameters, and seems to already do just what you want, at least for me using Chrome. Here's the key part of their code:

    <p>Click anywhere to toggle the box.</p>
    <div id="toggle"></div>

    <script>
      $( document ).click(function() {
        $( "#toggle" ).toggle( "scale" );
      });
    </script>

$( "#clickme" ).click(function() {
  $( "#book" ).hide( "slow", function() {
    //your css method or function
  });
});

Try this method

This is what I did to fix this: http://jsfiddle/693xw/13/

HTML

<input type="button" name="show" id="show" class="show" value="Show">
<div id="box" style="display:none;">
<a href="#" class="close">Close</a>
</div>

JS

$('a.close').click(function() { 
    $('#box').animate({
        width:"5px",
        height:"5px",
        opancy: "toggle"
    },1000);         
});
//});
$('#show').click(function() {
    $('#box').show().animate({
        width:"200px",
        height:"200px",
    },1000)      
});