1

我试图让一个 div 同时在它们的宽度和高度上成比例地出现。和一样要消失,但我做不到。还有其他更好的方法吗?谢谢。

http://jsfiddle.net/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);

});
4

4 回答 4

3

这是小提琴演示

 $('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);       
});
于 2013-09-27T16:26:16.083 回答
2

您只需要将direction参数更改为'both'

http://jsfiddle.net/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);       
    });

还有其他方法可以实现这一点:您可以将这种缩放效果描述为 CSS 文件中的 CSS 动画,而不是使用 jQuery 来实现。

编辑: http ://api.jqueryui.com/scale-effect/不仅有关于这个效果的 jQuery 文档,还包括两个演示。第一个基本上"scale"没有其他参数,并且似乎已经做了你想要的,至少对我使用 Chrome 来说是这样。这是他们代码的关键部分:

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

    <script>
      $( document ).click(function() {
        $( "#toggle" ).toggle( "scale" );
      });
    </script>
于 2013-09-27T16:17:02.957 回答
0

这就是我为解决这个问题所做的:http: //jsfiddle.net/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)      
});
于 2013-09-27T16:28:29.643 回答
0
$( "#clickme" ).click(function() {
  $( "#book" ).hide( "slow", function() {
    //your css method or function
  });
});

试试这个方法

于 2013-09-27T15:39:21.837 回答