jQuery scale img

[burn4ever]

Hallo ich möchte bei einem mousenter über ein Bild dieses skalieren.
Dachte da an so was:

$(this).animate({transform: 'scale(1.2)'}, 300);

aber das funktioniert so nicht.
Kann jemand helfen?

Im Prinzip so wie hier:
http://magazine.johnfrieda.fr/

Habe das auch schon via css realisiert muss aber auf JavaScript zurückgreifen weil mir die transition in Chrome in einem anderen div mein "column-count" zerstört. Ein "-webkit-backface-visibility:hidden;" hat auch nicht geholfen.

 

[AndreMUC]

Ich hab es so gemacht

CSS Code:

."deineKlasse":hover {
    -webkit-transform: scale(1.9);
    -moz-transform: scale(1.9);
    -ms-transform: scale(1.9);
    -o-transform: scale(1.9);
    transform: scale(1.9);
}

gestestet mit IE, Firefox und Chrome

 

[burn4ever]

Habe das auch schon via css realisiert muss aber auf JavaScript zurückgreifen weil mir die transition in Chrome in einem anderen div mein "column-count" zerstört. Ein "-webkit-backface-visibility:hidden;" hat auch nicht geholfen.

Wie gesagt habe ich das ganz ursprünglich in css realisiert. Chrome hat aber die Eigenart andere Elemente im Markup durch transitions zu beeinflussen.


https://www.google.de/search?q=chro...ari#hl=de&q=chrome+css+transition+bug&spell=1

 

[AndreMUC]

Auf meiner Seite konnte ich keinen Fehler im Chrome Browser feststellen.


Gesendet von meinem iPhone mit Tapatalk

 

[burn4ever]

Es liegt ja auch an den "transitions" und nicht an dem "transform".

 

[scbawik]

Es liegt ja auch an den "transitions" und nicht an dem "transform".

So etwas macht man nicht mit jQuery animate.
Würde mich überraschen wenn das überhaupt funktioniert.

Jedenfalls - wenn du mit CSS3 transforms arbeitest - dann vollständig. Das bedeutet kein .animate() sondern add/removeClass, animiert per CSS3 transitions.

btw: -webkit-transform: translateZ(0); behebt den Chrome (dachte eigentlich Safari) bug.

<div class="test"></div>

.test {
  -webkit-transform:translateZ(0); // force GPU rendering
  transition: all 2s;
}

.scale {
  transform: scale(1.2);
}

$('.test').addClass('scale'); // vergrößern
$('.test').removeClass('scale'); // normal

 

[burn4ever]

Danke,
-webkit-transform:translateZ(0);
den habe ich gesucht.