Question

我有一些隐藏的div，当点击一个按钮时，我想显示一个div。

我见过slideDown，但这并不是我想要的。我希望隐藏的div从无到有增长到原始大小，从（隐藏）div的右上角开始。

Answer 1

$("#box").show('size', { origin: ["top", "right"] }, 2000);

如果您希望能够使用相同的事件隐藏它，请使用相同参数的.toggle()。

第一个参数是我们正在使用的效果size。第二个参数是特定于此效果的选项对象，我们仅使用origin来指定应从中调整大小的位置。第三个参数是以毫秒为单位的持续时间，您可以随意更改。

实例：http://jsbin.com/uwonun/1

Answer 2

从无到有增长到原始大小，从（隐藏）div的右上角开始。

我认为切换可以满足您的需求......

试试这个

<强> HTML

<div id="test"></div>
<button id="button">click</button>

<强> jquery的

$(function(){
  $("#button").click(function(){
      $('#test').toggle('slow');
});
});

如果您在第二次点击时不需要任何动画，则可以使用one()

$(function(){
  $("#button").one('click',function(){
      $('#test').toggle('slow');
});
});

fiddle here

Answer 3

这不完全是你想要的，但它可能会被修改：

您可以使用.effect参数在潜水时使用jQuery UI "size"方法。这可以在选项中自定义，你应该能够解决这里的问题：

http://jqueryui.com/effect/

祝你好运，我希望这会有所帮助！

Answer 4

试试这个

    <html>
    <head>
        <style type="text/css">
            #slideDiv{display:none;width:400px;height:300px;position:absolute;top:0;right:0;background:#ff0000;color:#fff;}
        </style>
    </head>
    <body>
        <div id="slideDiv"> </div>
        <button id="startSlide">Start Slide</button>
        <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function(){
                $('#startSlide').on('click', function(){
                    $('#slideDiv').toggle('slow', function() { });
                })
            })
        </script>
    </body>
</html>

我希望这会有所帮助。

Answer 5

不确定这是否是黑客攻击。但是，我刚刚发现没有jQuery UI我就得到了我（和你）想要的东西（我立即从我的yeoman / bower构建中删除了库）：

var isLeft = !$myRelorAbsDiv.position().left; // 2-col layout, with floated divs
$myRelorAbsDiv.css(isLeft? "left":"right", 0).show("slow");

在2-col（仅基于容器的宽度...所有内部div只是向左浮动）布局中，上面的代码导致（由于在show方法调用之前的css定位）动画从右边发生在右列时（左侧动画，如果在左侧，第1列）。我几乎带来了jquery-ui这样做！等等：）

如何使用jquery从右上角滑动div？

5 个答案: