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

Share Improve this question Follow edited Sep 27, 2013 at 15:50 j_arab asked Sep 27, 2013 at 15:28 j_arabj_arab 3544 silver badges88 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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)      
});