jQuery 显示/隐藏缩放无法按预期工作

jquery show/hide scale doesnt work as expected

本文关键字：工作 显示 隐藏 缩放 jQuery      更新时间：2023-09-26

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

这是小提琴演示

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

您只需要将 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>

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

试试这个方法

这是我为解决这个问题所做的：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)      
});
相关文章：