web-dev-qa-db-fra.com

Changez la taille de div onclick avec l'animation

J'essaie de créer une galerie à l'aide de divs qui changent de hauteur lorsque vous cliquez dessus. Idéalement, cela inclurait une animation pour augmenter en douceur la hauteur de la div. Il y aura plusieurs de chaque div sur chaque page, il faut donc développer cette section.

En fait, il est censé créer quelque chose comme la section actualités sur cette page: http://runescape.com/

J'aimerais le faire avec JavaScript/jQuery si possible.

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

Consultez l'exemple de travail sur http://jsfiddle.net/tJugd/

17
Hussein

Voici le code que j'ai fini par utiliser:

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>

Violon:

https://jsfiddle.net/cp7uf8fg/

6
JacobTheDev

essayer 

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

D&EACUTE;MO

2
qwertymk

règles jQuery. Regarde ça.

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

2
Trevor Arjeski

Je sais que c'est vieux, mais si quelqu'un semble trouver son chemin ici. @JacobTheDev répond est super et n'a pas jQuery! J'ai ajouté un peu plus pour les cas d'utilisation où l'événement n'est pas affecté au même moment que vous basculez la classe css.

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

La solution complète:

Les deux types spacer DIV et Margin ou Padding sur le contenu DIV fonctionnent, mais il est préférable d’avoir toujours un spacer DIV.

Un design responsive peut ensuite être appliqué à celui-ci dans votre fichier CSS. C'est mieux, car avec Java l'écran scintillerait! Si vous utilisez un système de grille, il y aura une partie de requête multimédia besoin d'inclure vos paramètres.

J'utilise une petite entretoise sur un écran HD tout en augmentant jusqu'à l'écran mobile!

Néanmoins, si vous avez un fil d'Ariane dans l'en-tête, plusieurs lignes peuvent s'avérer délicates. Il est donc préférable de disposer d'un langage Java, mais différé pour des raisons de rapidité.

Cette Java ne se déclencherait que si le fil d’arrière-plan est très long, sinon un seul CSS s’applique via la grille et ne scintille pas du tout. Même si Java se déclenche via une animation élégante

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});
};

Notez que j'ai appliqué une marge de tolérance 5px!

Ho ça aide :-)

0
user3649978