jQuery Échelle et à la décoloration, à la même heure
Donc je peux faire un div à l'échelle bien à partir de son centre pivot: http://jsfiddle.net/uTDay/
Cependant, la transition commence à changer quand j'ai ajouter dans le contenu à l'intérieur de la div: http://jsfiddle.net/uTDay/1/
Avis qu'il n'est plus à diminuer à partir de centre.
J'ai aussi essayé de faire en sorte qu'il disparaît comme il commence à se rétrécir avec .fadeOut()
/.fadeTo()
/.animate()
, mais ne pouvait pas le faire fonctionner.
Fondamentalement, ce que j'aimerais accomplir cet effet est ici lorsque vous cliquez sur les options de filtre, que l'on shrink/grow
à partir de son centre de pivot et dans le même temps, fade in/out
: http://isotope.metafizzy.co/demos/filtering.html
Merci.
OriginalL'auteur kyooriouskoala | 2012-06-20
Vous devez vous connecter pour publier un commentaire.
CSS3 Approche
Isotope utilise CSS Transforme à l'échelle les éléments, c'est pourquoi tout le contenu des échelles. Si vous changez simplement de la boîte (conteneur) taille, les nœuds ne sont pas affectés (texte a la même taille de police, etc.)
Utiliser les CSS transforme ou modifier la taille de votre contenu avec l'élément conteneur (comme les autres réponses suggèrent).
Violon
http://jsfiddle.net/UFQW9/
Code
Javascript
CSS
Selon votre projet, vous pouvez ajouter visibility:hidden de la classe .la boîte.caché sinon, vous aurez un fantôme élément de blocage des éléments cliquables
Mieux violon vitrine avec bascule: jsfiddle.net/ufp1xc89
OriginalL'auteur Roman
J'ai pris mon temps sur celui-ci:
TOUS boîtes de cacher, et l'échelle de leur relative hauteurs basé sur les propriétés de chacun des éléments.
http://jsfiddle.net/uTDay/11/
Code, à l'aide d'une fonction de la variable à SÉCHER.
OriginalL'auteur Keyo
D'échelle et de fondu en même temps. Cela pourrait être remaniée un peu, mais c'est l'idée:
CSS (ajouté
position: relative
):DÉMO: http://jsfiddle.net/uTDay/12/
OriginalL'auteur Tallboy
la boîte est encore en train de faire l'effet que vous attendez, ce que vous devez faire est d'appliquer un effet similaire à l'img à l'intérieur de votre boîte de
OriginalL'auteur KoU_warch
Celui-ci fonctionne mieux 🙂
OriginalL'auteur Subodh
DÉMO= http://jsfiddle.net/uTDay/8/
de façon différente:
OriginalL'auteur Barlas Apaydin