4

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

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

4

5 回答 5

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

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

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

现场示例：http: //jsbin.com/uwonun/1

于 2013-05-24T09:12:07.440 回答
1

从无到有增长到它的原始大小，并从（隐藏）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');
});
});

在这里摆弄

于 2013-05-24T09:16:43.977 回答
0

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

.effect您可以使用参数在您的潜水中使用 jQuery UI方法"size"。这可以在选项中进行自定义，您应该能够在此处了解如何：

http://jqueryui.com/effect/

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

于 2013-05-24T09:08:32.113 回答
0

试试这个

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

我希望这有帮助。

于 2013-05-24T09:11:56.860 回答
0

不确定这是否是黑客行为。但是，我刚刚发现在没有 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 定位）动画在右边时从右边发生列（左侧动画，如果在左侧，则为第一列）。我几乎引入了 jquery-ui 来做到这一点！废话:)

于 2013-10-04T07:38:58.763 回答