Ausbau DIV mit jQuery

Habe ich dieses kleine Stückchen code, die in Aktion gesehen werden kann hier

http://jsfiddle.net/rullingen/GCXsq/1/

Was im Grunde dehnt div Höhe, wenn Sie schwebte über und Verträge, wenn nicht.
Im moment erweitert von 75px auf 300px. Ich möchte dies ändern, so dass es sich aus 75px Höhe passt, dass die Inhalte in den DIV. Ich habe versucht Einstellung der erweitern Wert 'auto' ist, aber dies scheint nicht gut zu funktionieren. Kann jemand mir einen Zeiger?

HTML

<div class="expand">
    <img src="http://rauanklassnikringing.com/wp-content/uploads/2010/11/carrot-imperator.jpg" alt="" />
</div>
<div class="expand">
    <img src="http://rauanklassnikringing.com/wp-content/uploads/2010/11/carrot-imperator.jpg" alt="" />
</div>

<div class="expand">
    <img src="http://rauanklassnikringing.com/wp-content/uploads/2010/11/carrot-imperator.jpg" alt="" />
</div>

<div class="expand">
    <img src="http://rauanklassnikringing.com/wp-content/uploads/2010/11/carrot-imperator.jpg" alt="" />
</div>

<div class="expand">
    <img src="http://rauanklassnikringing.com/wp-content/uploads/2010/11/carrot-imperator.jpg" alt="" />
</div>

Javascript

$('.expand').hover(function() {
    $(this).animate({
        height: '300px'
    }, 300);
},function() {
    $(this).animate({
        height: '75px'
    }, 300);
});

CSS

.expand {
    overflow: hidden;
    margin-bottom: 15px;
    height: 75px;
}
InformationsquelleAutor Alex Sadler | 2011-02-16
  1. 9

    Können Sie berechnen die kumulative Höhe der Elemente in Ihrem <div> und verwenden Sie das Ergebnis als argument zu animate():

    $('.expand').hover(function() {
    var contentHeight = 0;
    $(this).children().each(function() {
        contentHeight += $(this).height();
    });
    $(this).animate({
        height: contentHeight
    }, 300);
}, function() {
    $(this).animate({
        height: '75px'
    }, 300);
});

    Aktualisiert fiddle hier.

    • Sehr hilfreich, vielen Dank.
    InformationsquelleAutor Frédéric Hamidi
  2. 0

    Können Sie stellen Sie den Stil auf "display:inline-block" auf schweben und entfernen Sie die Maus. Dies funktioniert für den IE8. Für IE7 - Sie haben alle eine kleine extra an style
    (zoom:1; *display: inline; _height: 30px;") - die Höhe kann geändert werden, wie pro Ihre Anforderungen.

    InformationsquelleAutor sajoshi
Schreibe einen Kommentar