jquery 将左下角切换到右上角

Question

我已经让这个脚本一切正常，但我想知道是否可以将左下角切换到右上角，

    $("a#slick-toggle").click(function() {
    $("#slickbox").animate({width: "toggle", 
                height: "toggle"}, 1000);
});

谢谢 Gareth

Answer 1

您可以将位置设置为相对位置，然后为 left 属性设置动画，如下所示：

$("a#slick-toggle").click(function() {
  var sb = $("#slickbox").stop(true, true), w = sb.is(":visible") ? sb.width():0;
  sb.animate({width: "toggle", height: "toggle", left: w}, 1000);
});​

您可以在这里尝试一下，它的作用是抓取 .width()< /code>元素并将其在动画中向左移动那么远，从而产生向右折叠的效果，而不是向左折叠。 .stop(true, true) 部分是为了防止动画队列-up 并且 .width() 是执行时的适当值访问它（不是中间动画宽度）。

Answer 2

为此，您可以浮动您的#slickbox到右侧！

JS

$(document).ready(function() {
  $("a#slick-toggle").click(function() {
    $("#slickbox").animate({width: "toggle",
                height: "toggle"}, 1000);
    return false;
  });
});

HTML
请注意：float: right

<a href="#" id="slick-toggle">Clicked</a><br />
<div style="width: 25px; float: left;">
 <div id="slickbox" style="float: right;">Testt</div>
</div>

查看演示

Answer 3

http://api.jquery.com/animate/ 有一个移动示例。右上角可以通过 css 设置为 top: 0px; right: 0px; 所以它会是这样的：

.animate({
  top: 0,
  right: 0,
  height: 'toggle'
});