Floating-Elemente und mit jQuery

Question

Ich habe ein Raster von Logos, 5 über und 4 nach unten.

Wenn ein Benutzer auf ein Logo klickt, wird das Logo in das Raster geschoben und fällt aus der Site. Alles läuft ziemlich reibungslos, bis man auf das 5. Logo klickt. Sie können es hier versuchen:

logo hider

Alle Ideen, wie den Sprung in Logos zu korrigieren, wenn Sie die fünfte einem Klick?

Hier ist meine jQuery:

$(document).ready(function() { 

$('.imageShowing').click(function() { 

     if ($(':animated').length) { 
     return false; 
        } 
    $(this).animate({ 
    zIndex: '1', 
    height: '100', 
    width: '140', 
    marginTop: '14px', 
    marginLeft: '20px', 
    marginRight: '20px', 
    marginBottom: '14px', 
    }, 100, function() { 


    $(this).rotate({ angle:0,animateTo:90,easing: $.easing.easeInOutExpo }) 

    $(this).animate({ 
    zIndex: '1', 
    top: '480', 
    opacity: '0' 
    }, 1000, function() { 
    $(this).hide("fast"); 
    // Animation complete. 
    }); 
    }); 
}); 

}); //end document.ready 

Meine CSS:

#wrapper { width: 1000px; margin: 0 auto; height: 1000px; position: relative;} 
#grid {width: 935px; height: 531px; margin: 0 auto; background: url(images/grid.png) no-repeat center; padding:39px 4px 39px 11px; position: relative; z-index: 5;} 
#logoWrapper {position: absolute; top: 38px; left: 36px } 
#logoWrapper img { float: left; padding: 0 7px 6px 0; margin:0; position: relative; z-index: 6;} 

#bottom { height: 500px; width: 950px; background: #fff; margin: 0 auto; position: relative; z-index: 10;} 

Die HTML ist ziemlich einfach. Danke für die Hilfe.

Answer 1

Ich würde empfehlen, dass eine ungeordnete Liste zu machen, sowohl weil es macht, was Sie tun möchten, und für semantische Zwecke.

Dann können Sie Ihre <li> s relativ und die Bilder in ihnen absolut positionieren. Auf diese Weise wird das Layout des Rasters durch die Animation der Bilder nicht gestört. Verstecken Sie einfach die <li> am Ende statt nur das Bild.

Answer 2

in meinem Chrom alles gut funktionieren, aber in IE 7 funktioniert überhaupt nicht, in Ihrem ersten belebten

$(this).animate({ 
    zIndex: '1', 
    height: '100', 
    width: '140', 
    marginTop: '14px', 
    marginLeft: '20px', 
    marginRight: '20px', 
    marginBottom: '14px', 
    } 

die letzten löschen '' hinter Margin können einige Browser eines anderen Parameter erwarten.