web-dev-qa-db-de.com

Ändern Sie die Div-Höhe mit einem Klick auf die Animation

Ich versuche, eine Galerie mit divs zu erstellen, deren Höhe sich ändert, wenn Sie auf sie klicken. Im Idealfall würde dies eine Animation beinhalten, um die Höhe des Dings gleichmäßig zu vergrößern. Es gibt mehrere Div-Elemente auf jeder Seite. Es muss also nur der Abschnitt erweitert werden.

Es soll eigentlich so etwas wie der Nachrichtenbereich auf dieser Seite werden: http://runescape.com/

Ich würde es gerne mit JavaScript/jQuery machen, wenn möglich.

12
JacobTheDev
$('div').click(function(){
    $(this).animate({height:'300'})
})

Überprüfen Sie das Funktionsbeispiel unter http://jsfiddle.net/tJugd/

17
Hussein

Hier ist der Code, den ich am Ende verwendet habe:

JS:

document.getElementById("box").addEventListener("click", function() {
    this.classList.toggle("is-active");
});

CSS:

#box {
    background: red;
    height: 100px;
    transition: height 300ms;
    width: 100px;
}

#box.is-active {
    height: 300px;
}

HTML:

<div id="box"></div>

Geige:

https://jsfiddle.net/cp7uf8fg/

6
JacobTheDev

versuchen 

$('div').toggle(function(){
    $(this).animate({'height': '100px'}, 100);
}, function(){
    $(this).animate({'height': '80px'}, 100);
});

DEMO

2
qwertymk

jQuery-Regeln. Schau dir das an.

http://api.jquery.com/resize/

2
Trevor Arjeski

Ich weiß, das ist alt, aber wenn jemand hier seinen Weg zu finden scheint. @JacobTheDev Antwort ist großartig und hat keine jQuery! Ich habe ein wenig mehr für Anwendungsfälle hinzugefügt, bei denen das Ereignis nicht an derselben Stelle zugewiesen wird, an der Sie die CSS-Klasse umschalten.

HTML

<div id='item' onclick='handleToggle()'> </div>

JS

handleToggle(event){    
  document.getElementById(event.target.id).classList.toggle('active')
}

CSS

#item {
  height: 20px;
  transition: 1s;
}

.active {
  height: 100px;
}
0
bazinga

Die Komplettlösung:

Sowohl Spacer DIV als auch Margin oder Padding für den Inhalt von DIV funktionieren, aber am besten ist immer noch ein Spacer DIV.

Das Responsive Design kann dann in Ihrer CSS-Datei angewendet werden. Dies ist besser, da bei Java der Bildschirm flackert! Wenn Sie ein Rastersystem verwenden, wird ein Teil für die Medienabfrage vorhanden sein müssen Ihre Einstellungen enthalten.

Ich verwende einen kleinen Abstandhalter auf dem HD-Bildschirm, während er bis zum mobilen Bildschirm ansteigt.

Wenn Sie in der Kopfzeile ein Breadcrumb haben, können mehrere Zeilen schwierig sein, so dass Sie am besten ein Java haben, das aber aus Gründen der Geschwindigkeit zurückgestellt wird. Beachten Sie, dass die Animation dazu dient, das Flimmern des Bildschirms zu beseitigen.

Dieses Java würde nur dann feuern, wenn der Breadcrumb sehr lang ist, andernfalls wird ein einzelnes CSS über das Raster angewendet und flackert überhaupt nicht. Selbst wenn Java seine Arbeit über eine elegante Animation abbricht

var header_height = $('#fixed_header_div').height();
var spacer_height = $('#header_spacer').height() + 5;    

if (header_height > spacer_height) {
    $('#header_spacer').animate({height:header_height});
};

Beachten Sie, dass ich einen Toleranzabstand von 5px angewendet habe!

Ho das hilft :-)

0
user3649978