jQuery的切換左下到右上

Question

我有這個腳本一切工作正常，但我不知道如果它能夠切換左下到右上

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

感謝加雷思

Answer 1

http://api.jquery.com/animate/具有的一個例子運動。右上可以通過CSS設置爲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); 
});​ 

You can give it a try here，什麼這樣做是抓住元素的.width()並將其移動到動畫的左側，使其向右而不是向左移動。 .stop(true, true)部分是爲了防止動畫隊列，並且.width()是訪問它時的適當值（不是中等動畫寬度）。

Answer 3

爲了做到這一點，你可以float您#slickbox到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> 

See Demo