zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden jQuery: Background Animation (snook.ca)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 29.10.2010, 15:44
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.06.2008
Beiträge: 23
p0mmeluff befindet sich auf einem aufstrebenden Ast
Standard 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:
Meldung: 'undefined' ist Null oder kein Objekt
Zeile: 22
Zeichen: 16
Code: 0
(Zeile und Stelle habe ich im nachstehenden Code-Block hervorgehoben.)

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

});
Warum spuckt der IE nun bei mir diesen Fehler aus, während er das bei snook.ca nicht tut? Und warum beschwert sich sonst kein Browser darüber?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 29.10.2010, 19:01
Benutzerbild von cebito
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.07.2009
Ort: Dresden
Beiträge: 688
cebito sorgt für eine eindrucksvolle Atmosphärecebito sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
$(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"})
}})
})

});
RotundFett, sonst fällt mir jetzt nix auf...
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 29.10.2010, 19:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.06.2008
Beiträge: 23
p0mmeluff befindet sich auf einem aufstrebenden Ast
Standard

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..?
Mit Zitat antworten
  #4 (permalink)  
Alt 29.10.2010, 19:19
Benutzerbild von cebito
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.07.2009
Ort: Dresden
Beiträge: 688
cebito sorgt für eine eindrucksvolle Atmosphärecebito sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von p0mmeluff Beitrag anzeigen
An den markierten } Klammern dürfte es nicht liegen.
"dürfte"? Hast sie denn mal rausgenommen?

Zitat:
Zitat von p0mmeluff Beitrag anzeigen
Die Anzahl der Klammern stimmt und deren Position im Grunde auch..
jetzt nochmal 10 mal durchgeschaut, die stimmen wirklich - sorry, fällt mir grad nicht mehr zu ein...

Geändert von cebito (29.10.2010 um 19:27 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 29.10.2010, 19:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.06.2008
Beiträge: 23
p0mmeluff befindet sich auf einem aufstrebenden Ast
Standard

Hab ich, ja. Dann funktioniert der ganze Effekt in keinem Browser mehr.

Code:
{duration:200, complete:function(){
$(this).css({backgroundPosition: "-240px -200px"})
}}
Mit Zitat antworten
  #6 (permalink)  
Alt 29.10.2010, 19:52
Benutzerbild von uspri
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 04.07.2005
Beiträge: 900
uspri sorgt für eine eindrucksvolle Atmosphäreuspri sorgt für eine eindrucksvolle Atmosphäre
Standard

Hast Du auch das "Background-Position plugin" eingebunden, auf das auf der originalen Seite verwiesen wird, eingebunden? Denn der IE kann mit diesen Angaben ansonsten nicht umgehen.
Mit Zitat antworten
  #7 (permalink)  
Alt 30.10.2010, 04:11
Benutzer
neuer user
 
Registriert seit: 26.01.2007
Beiträge: 87
trixta befindet sich auf einem aufstrebenden Ast
Standard

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 04:18 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 30.10.2010, 10:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.06.2008
Beiträge: 23
p0mmeluff befindet sich auf einem aufstrebenden Ast
Standard

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!
Mit Zitat antworten
Antwort

Stichwörter
animation, background, fehlermeldung, image, jquery, snook.ca, strg, undefined

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Inline Listenelement wird nicht richtig im background befüllt SteveB CSS 3 28.04.2011 20:41
Problem mit CSS Style flo007 CSS 3 25.01.2009 17:08
Float-Reihenfolge? wolf1985 CSS 0 21.08.2008 01:35
Footer left und right Probleme... wolf1985 CSS 2 14.08.2008 13:04
Mozilla zeigt DIV zu oft an cracki CSS 6 09.03.2008 15:22


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:46 Uhr.