jQuery從左下到右上切換

Question

我有這個腳本，一切正常，但我想知道是否有可能將左下角切換到右上角

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

感謝Gareth

Answer 1

http://api.jquery.com/animate/有一個運動示例。 右上角可以通過CSS設置為top: 0px; right: 0px; top: 0px; right: 0px; 所以會是這樣的：

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

Answer 2

您可以將位置設置為相對，然后為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()並將其移動到動畫中的左側，從而使該效果向右而不是向左折疊。 .stop(true, true)部分是為了防止動畫排隊，並且.width()是訪問它時的適當值（不是動畫中間寬度）。

Answer 3

為此，您可以將#slickbox float到right ！

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>

觀看演示