Diapositive Jquery à l'avant

Question

Juste une petite question (j'espère).

Je veux glisser un div devant un autre div, avec Jquery.

Je ne veux pas cacher un div puis faites glisser l'autre vers le bas et je ne veux pas pousser un div vers le bas lorsque les autres diapositives.

Est-ce que quelqu'un sait une bonne façon de le faire, éventuellement avec un plug-in pour Jquery?

Answer 1

Utilisez positionnement absolu pour les divs et ils ne s'affecteront pas lors du glissement.

Answer 2

Tout ce que vous avez à faire est d'utiliser le positionnement absolu et le contrôle que vous pouvez afficher via z-index. Le reste est simple animation

Vérifiez ce site pour une démonstration http://jsbin.com/egula/ (http://jsbin.com/egula/edit pour le code source)

par exemple

div.first, div.second { 
    position:absolute; 
    top:20px; 
    left:20px; 
    background-color:red; 
    height:100px; 
    width:100px; 
} 
div.second { 
    z-index:-20; 
    background-color:yellow; 
} 

<div class="first">foo</div> 
<div class="second">bar</div> 

$(document).ready(function(){ 
    $(WHATEVERSELECTOR).click(function() { //or bind differently 
     //jQuery core version 
     $(".second").css("width", 0).css("z-index","1").animate({ width: "100px" }, 2000); 
     //use this line if have jQuery UI included anyway 
     //$(".second").hide().css("z-index","1").show("slide", { direction: "left" }, 2000); 
    }); 
});