jquery .css() - nur Chrome mit animation?

[d3mueller]

hi, habe mit .css() das Hintergrundbild bei hover ändern lassen.

Nur bei Chrome ist das ganze animiert, bei allen anderen Browsern nicht.

Ist das normal?
Und gibt es einen Weg, .css() bei allen zu animieren?

Danke schon mal

Lg

 

[Sebbyone]

AW: jquery .css() - nur Chrome mit animation?

Zeig doch mal den Code

 

[d3mueller]

AW: jquery .css() - nur Chrome mit animation?

$('div#1').hover(function() {
		$(this).css({'background-image': 'url(Bilder/bsp-bild-button.png)'});
		
	});
	$('div#1').mouseout(function() {
		$(this).css({'background-image': 'url(Bilder/raster.png)'});
	});

Hoffe, das hilft^^. Wie gesagt, nur Chrome animiert das, und alle anderen nicht, da "ploppt" einfach das neue BG-Bild auf. Und das ist unschön

 

[Duddle]

AW: jquery .css() - nur Chrome mit animation?

Mein Chrome animiert das nicht. Ich habe zwar eine ältere Version, aber ich glaube auch nicht dass das Standardverhalten ist. Schließlich gibst du keinerlei Anweisungen zur Animation an, daher sollte er auch keine reinschmuggeln.

Du kannst ja mal probehalber folgendes ausprobieren, was exakt den gleichen Effekt haben sollte:

$(document).ready(function() {
    var d = document.getElementById("1");
    d.onmouseover = function() {
	d.style.backgroundImage = 'url(img/1.jpg)';
    };
    d.onmouseout = function() {
	d.style.backgroundImage = 'url(img/2.jpg)';
    };
}

Duddle

 

[d3mueller]

AW: jquery .css() - nur Chrome mit animation?

Hi,
Komisch, bei mir ist das halt so, mit Chrome.



--

Ja, da passiert exakt dasselbe, halt auch ohne Aimation. Aber Chrome animiert das immer noch.

Und ne Animation wäre halt schön

 

[Sebbyone]

AW: jquery .css() - nur Chrome mit animation?

Wieso löst du das nicht über CSS Transitions und ersparst dir jquery?

 

[d3mueller]

AW: jquery .css() - nur Chrome mit animation?

Habe ich versucht. Aber irgendwie animiert der das auch nicht mit transitions . Nur Chrome animiert das genauso wie mit jquery.

Kann man überhaupt Background-Image mit Transition machen? Weil da ist ja kein Wert bei dem er Zwischenschritte berechnen kann.

 

[Duddle]

AW: jquery .css() - nur Chrome mit animation?

Im Englischen heißt sowas "crossfade":

http://www.simonbattersby.com/blog/simple-jquery-image-crossfade/

http://malsup.com/jquery/cycle/


Duddle

 

[Sebbyone]

AW: jquery .css() - nur Chrome mit animation?

Habe ich versucht. Aber irgendwie animiert der das auch nicht mit transitions . Nur Chrome animiert das genauso wie mit jquery.

Kann man überhaupt Background-Image mit Transition machen? Weil da ist ja kein Wert bei dem er Zwischenschritte berechnen kann.

Kann man machen müsste in ungefähr so aussehen wenn ich mich täusche:

#div {
background-image: image.png;
transition: background 0.2s ease-in-out;

}

#div:hover {
background-image: image2.png;
}


ansonsten steht hier noch was interessantes: http://css-tricks.com/fade-image-within-sprite/

 

[d3mueller]

AW: jquery .css() - nur Chrome mit animation?

Im Englischen heißt sowas "crossfade":

http://www.simonbattersby.com/blog/simple-jquery-image-crossfade/

http://malsup.com/jquery/cycle/


Duddle

Danke, aber damit kann man halt nur Bilder ändern, ich brauche halt die Eigenschaft background-image von CSS.

Kann man machen müsste in ungefähr so aussehen wenn ich mich täusche:

#div {
background-image: image.png;
transition: background 0.2s ease-in-out;

}

#div:hover {
background-image: image2.png;
}


ansonsten steht hier noch was interessantes: http://css-tricks.com/fade-image-within-sprite/

Ja, da kommt halt keine Animation. Weil, ich glaube, der Browser braucht konkrete Werte (1px zu 10px, oder #000 zu #432), um die Zwischenschritte berechnen zu können. Das geht bei 2 Bildern halt nicht.

Nur Chrome zeigt eine Animation an, aber das ist halt so eine Funktion bei dem

Mit dem Link: Ich glaube, bei der Struktur, die ich habe, krieg ich das so nicht hin, leider. Aber Danke


Hat sonst noch jemand ideen?

 

[Duddle]

AW: jquery .css() - nur Chrome mit animation?

Also jQuery kann es nicht, die .animate()-Funktion wirkt nur auf numerische Werte. Daraus schließe ich, dass es dafür auch kein PlugIn geben wird.

Eine Lösung wäre, das rotierende Bild eben nicht als CSS zu setzen, sondern innerhalb eines <div> direkt unter dem Element dass das Hintergrundbild bekommen soll.


Duddle

 

[d3mueller]

AW: jquery .css() - nur Chrome mit animation?

hi,

okay, danke. Das werde ich dann mal versuchen