|
|||
jQuery: Background Animation (snook.ca)
Hallo Leute,
um Hintergrundbilder bei MouseOver & MouseOut zu animieren, habe ich mir den Weg von Jonathan Snook "Using jQuery For Backgrund Image Animations" (Link) angesehen. Die Lösung funktioniert im Grunde fehlerfrei, bloß Kollege Internet Explorer beschwert sich mal wieder. Der sagt mir nämlich immer folgendes: Zitat:
Der "Witz" ist: Um das Ganze erstmal zu testen hab den Code 1:1 aus der jquery.bgpos.js von der Demo-Seite kopiert und lediglich eigene background-position Werte ergänzt (um verschiedene Grafiken zu verwenden). Das schaut dann so aus: Code:
(function($) { $.extend($.fx.step,{ backgroundPosition: function(fx) { if (fx.state === 0 && typeof fx.end == 'string') { var start = $.curCSS(fx.elem,'backgroundPosition'); start = toArray(start); fx.start = [start[0],start[2]]; var end = toArray(fx.end); fx.end = [end[0],end[2]]; fx.unit = [end[1],end[3]]; } var nowPosX = []; nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0]; nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1]; fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1]; function toArray(strg){ strg = strg.replace(/left|top/g,'0px'); strg = strg.replace(/right|bottom/g,'100%'); strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2"); var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/); return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]]; } } }); })(jQuery); // Notiz: Bis zu dieser Stelle 1:1 Kopie von snook.ca! // Und im folgenden lediglich Positionsänderungen & Ergänzung von #zwei und #drei $(function(){ $('#eins') .css( {backgroundPosition: "0px -200px"} ) .mouseover(function(){ $(this).stop().animate({backgroundPosition:"(0px 0px)"}, {duration:400}) }) .mouseout(function(){ $(this).stop().animate({backgroundPosition:"(0px -200px)"}, {duration:200, complete:function(){ $(this).css({backgroundPosition: "0px -200px"}) }}) }) $('#zwei') .css( {backgroundPosition: "-120px -200px"} ) .mouseover(function(){ $(this).stop().animate({backgroundPosition:"(-120px 0px)"}, {duration:400}) }) .mouseout(function(){ $(this).stop().animate({backgroundPosition:"(-120px -200px)"}, {duration:200, complete:function(){ $(this).css({backgroundPosition: "-120px -200px"}) }}) }) $('#drei') .css( {backgroundPosition: "-240px -200px"} ) .mouseover(function(){ $(this).stop().animate({backgroundPosition:"(-240px 0px)"}, {duration:400}) }) .mouseout(function(){ $(this).stop().animate({backgroundPosition:"(-240px -200px)"}, {duration:200, complete:function(){ $(this).css({backgroundPosition: "-240px -200px"}) }}) }) }); |
Sponsored Links |
Sponsored Links |
|
|||
An den markierten } Klammern dürfte es nicht liegen.
Die Anzahl der Klammern stimmt und deren Position im Grunde auch.. Inzwischen ist mir auch aufgefallen, dass der IE ein und den selben Code mal mag und mal nicht, wenn man ihn in unterschiedlichen Dateien verwendet, selbst wenn deren Inhalt wiederum kaum abweicht. Als wäre es pures Glücksspiel..? |
|
|||
Du nutzt eine relativ alte version des scripts, welche dem IE gleiche einschränkungenen gegeben hat, die auch für FF2.0 gelten, um das verhalten in allen browsern gleich zu halten. inzwischen dürfte man es wohl verkraften, wenn es im ff2.0 keine animation sondern nur eine statische änderung gibt.
Hier findest du eine neuere version: jQuery Background Position Effect Das script funktioniert definitiv mit jQuery 1.4.2, ob es Kompatibilitätsprobleme mit 1.4.3 gibt, weiß ich noch nicht. Um Probleme besser diskutieren zu können empfehle ich immer ein einfaches Beispiel zu machen JS Bin - Collaborative JavaScript Debugging / http://jsfiddle.net/ helfen dabei Geändert von trixta (30.10.2010 um 05:18 Uhr) |
|
|||
Ui, klasse!
uspri - ja, das Plugin war eingebunden, aber es war wirklich eine alte Version, wie trixta richtig erkannt hat. Ich hab nun V. 1.21 eingebunden, die in Verbindung mit jQuery 1.4.3 hervorragend funktioniert. Vielen Dank für eure Hinweise und Hilfsbereitschaft! |
Stichwörter |
animation, background, fehlermeldung, image, jquery, snook.ca, strg, undefined |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Inline Listenelement wird nicht richtig im background befüllt | SteveB | CSS | 3 | 28.04.2011 21:41 |
Problem mit CSS Style | flo007 | CSS | 3 | 25.01.2009 18:08 |
Float-Reihenfolge? | wolf1985 | CSS | 0 | 21.08.2008 02:35 |
Footer left und right Probleme... | wolf1985 | CSS | 2 | 14.08.2008 14:04 |
Mozilla zeigt DIV zu oft an | cracki | CSS | 6 | 09.03.2008 16:22 |