Question

我试图让div在它们的宽度和高度上按比例出现。同样消失，但我不能这样做。还有其他更好的办法吗？感谢。

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

});

Answer 1

这是小提琴Demo

 $('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);       
});

Answer 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>

Answer 3

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

试试这个方法

Answer 4

这就是我解决这个问题的方法： 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)      
});

jquery show / hide scale没有按预期工作

4 个答案: