fond à bascule jquery gauche vers le haut à droite

Question

j'ai ce script tout fonctionne très bien, mais j'étais je me demande s'il est possible de basculer en bas à gauche en haut à droite

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

merci Gareth

Answer 1

http://api.jquery.com/animate/ a un exemple de mouvement. En haut à droite peut être réglée via css comme top: 0px; right: 0px; il serait donc quelque chose comme:

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

Answer 2

Vous pouvez régler la position par rapport puis animez aussi, comme la propriété left ceci:

$("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, ce cela fait saisir le .width() de l'élément et le déplace aussi loin vers la gauche dans l'animation, donnant l'effet de l'effondrement vers la droite, plutôt que vers la gauche. La partie .stop(true, true) doit empêcher la mise en file d'attente des animations et .width() est la valeur appropriée pour accéder à cette animation (et non une largeur d'animation moyenne).

Answer 3

Pour ce faire, vous pouvez float votre #slickbox à right!

JS

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

HTML S'il vous plaît noter: 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