jquery 显示/隐藏比例不按预期工作答案

【问题标题】：jquery show/hide scale doesnt work as expectedjquery 显示/隐藏比例不按预期工作
【发布时间】：2013-09-27 15:28:01
【问题描述】：

我试图让一个 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);

});

【问题讨论】：

标签： javascript jquery html css show-hide

【解决方案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);       
});

【讨论】：

【解决方案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>

【讨论】：

谢谢，这正是我所需要的！

【解决方案3】：

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

试试这个方法

【讨论】：

我想在 DEMO（显示）中获得类似的东西，以隐藏（）#box div

【解决方案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>

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

【讨论】：