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

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

jquery jquery-ui

如何使用jquery从右上角滑动div？,jquery,jquery-ui,jquery-animate,Jquery,Jquery Ui,Jquery Animate,我有一些隐藏的div，当点击按钮时，我想显示一个div 我看到了向下滑动，但这并不是我想要的。我希望隐藏div从零增长到原始大小，并从（隐藏）div的右上角执行此操作。这并不完全是您想要的，但它可能会被修改：您可以使用jqueryui.effect方法，在潜水时使用“size”参数。这在选项中是可自定义的，您应该能够在此处了解如何：祝你好运，我希望这有帮助试试这个 <html> <head> <style type="text

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

我看到了

向下滑动

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

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

您可以使用jqueryui

.effect

方法，在潜水时使用

“size”

参数。这在选项中是可自定义的，您应该能够在此处了解如何：

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

试试这个

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


#slideDiv{显示：无；宽度：400px；高度：300px；位置：绝对；顶部：0；右侧：0；背景：#ff0000；颜色：#fff；}
开始幻灯片
$（函数（）{
$（“#开始滑动”）。在（'click'，function（）上{
$（'#slideDiv'）.toggle（'slow'，function（）{}）；
})
})

我希望这有帮助

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

如果希望能够用相同的事件隐藏它，请使用具有相同参数的

.toggle（）

第一个参数是我们正在使用的效果，

size

。第二个参数是特定于此效果的选项对象，我们仅使用

origin

来指定其调整大小的起始位置。第三个参数是以毫秒为单位的持续时间，您可以在空闲时更改

实例：

从零增长到原始大小，并从（隐藏）div的右上角执行此操作

我想开关能满足你的需要

试试这个

html

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

如果在第二次单击中不需要任何动画，则可以使用

one（）

不确定这是否是黑客行为。但是，我刚刚发现我（和您）在没有jQuery UI的情况下得到了我想要的（并且我立即从我的yeoman/bower构建中删除了该库）：

在2列（仅基于容器的宽度…所有内部div都向左浮动）布局中，上面的代码导致（由于css在show方法调用之前的定位）动画在右列（左动画，如果在左，则在第1列）中从右发生。我差点带上jquery ui来做这个！废话：）

使用fadeIn而不是幻灯片，或者可以设置动画？你能发布一些你到目前为止尝试过的代码来帮助我们吗？这确实是我想要的效果，但是它从左上角而不是右上角显示div。顺便说一下，你需要先显示（）你隐藏的div，这样它就得到了“layout”。另外，在所有浏览器中，直到IE8，都使用jQuery 1.9进行了测试。也一样。

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

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

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