JQuery: Fade alle anderen Divs aus und bewege $ (this) nach oben links

Question

Ich habe ein Raster von divs (wir nennen es "#entry"). Ich habe sie derzeit, wo jemand klickt, wenn jemand ein div klickt, wird es alle anderen ausblenden. Aber ziemlich abrupt bewegt sich das ausgewählte (angeklickte) div nach oben links vom Part div. Wie kann ich es zu einem "reibungslosen" Übergang zu diesem Teil des Bildschirms bringen, nachdem alle anderen ausgeblendet sind? Ich stelle unten den Code zur Verfügung, den ich gerade verwende.

$(document).ready(function() { 
     $("div#entry").click(function() 
     { 
     $(this) 
      .siblings("div#entry") 
       .fadeOut(); 
     }); 
    }); 

Dank

Answer 1

First off es falsch ist, mehrere HTML zu haben, Elemente mit der gleichen ID

Das besagt, dass die Eltern DIV einen position:relative Style-Satz haben müssen.

jQuery verwenden können Sie dann

$("div.entry").click(function() 
{ 
    $(this).siblings.fadeOut(function() 
    { 
     $(this).animate({"left": "0","top":"0"}); 
    }); 
} 

Answer 2

Position absolut an der aktuellen Position, bevor die Geschwister ausblenden:

var element = $(this); 
var offset = element.offset(); // determine absolute position of the element 
element.css({ 
    position: 'absolute', 
    top:  offset.top+'px', 
    left:  offset.left+'px' 
}); 

Danach werden Ihre Elemente ausgeblendet. Sie können dieses Element der oberen linken Ecke bewegen anschließend den folgenden Code:

element.animate({ 
    top: '0px', 
    left: '0px' 
}, 1000); 

Sie müssen wahrscheinlich die Offset-Berechnungen auf der umgebenden Elemente und CSS-basierte anzupassen. Ich schlage vor, dass Sie dem Hinweis von Patrick dw folgen: Verwenden Sie Klassen anstelle von IDs, da eine ID im gesamten Dokument eindeutig sein soll.

Answer 3

Blick in die belebten Funktion()

Answer 4

Mit Check vor der positon der andere entfernen, und befestigen Sie es dort (jquery position) und dann animate es

Answer 5

auch tun beachten Sie, dass vor einer Klasse oder ID ein Element Name ist eigentlich langsamer als nur allein die ID oder Klassennamen verwenden.

Beispiel:

$("div#entry") 

ist langsamer als

$("#entry") 

auszuführen, die beide das Gleiche erreichen.

Der Grund dafür ist, dass, wenn Sie jQuery mit einem Element im Vordergrund bereitstellen, es anschließend das gesamte DOM nach diesem Element durchsuchen wird, anstatt nur nach einer bestimmten ID/Klasse zu suchen.

Answer 6

Sie müssen ihre Position auf der Seite finden, ihren CSS-Positionswert auf absolut setzen und dann ihre CSS-Werte für oben, links, rechts oder unten auf ihre jeweiligen Werte setzen. Sie können dies tun, wie so:

$("div.entry").each(function(){ 
     var h = $(this).position().top; 
     $(this).css('top',h+'px'); 
    }); 

Dann können Sie ihre Position auf absolute gesetzt, wenn (falls) sie angeklickt werden. Danach blenden Sie die Geschwister aus und animieren Sie das angeklickte Div, um zur Position des ersten Wertes zu gelangen (an der es automatisch hingeht).

Der vollständige Code und das Beispiel finden Sie unter jsfiddle.