[GELÖST] jQuery Frage / Animation von Links bzw. Hintergrundgrafiken
Eingetragen von xpla (38)am 17.08.2010 - 14:34 Uhr in
Hallo,
ich weiß einfach nicht mehr weiter. Ich möchte eigentlich nur den Zustand "hover" animieren, sodass er sanft die Farbe wechselt bei einem mouseover.
Ich lade jquery ui und habe es auch mit dem color plugin probiert und bekomme es einfach nicht hin.
Inzwischen wollte ich einfach testen, ob ich die Hintergrundfarbe des dahinterliegenden DIVs animieren kann, auch dies funktioniert nicht.
Jquery 1.3.2 und Jquery UI 1.8.4 wird geladen.
$(document).ready(function(){
$("div#header-07-nav").hover(function() {
$(this).stop().animate({ backgroundColor: "#a7bf51"}, 800);
},function() {
$(this).stop().animate({ backgroundColor: "#ffffff" }, 800);
});
});- Anmelden oder Registrieren um Kommentare zu schreiben
Guck Dir das mal bei mir
am 17.08.2010 - 14:43 Uhr
Guck Dir das mal bei mir unter http://www.sense-design.de/referenzen an.
Hier der Quelltext des JS
<div class="node-referenz" style="background-color: #DEDEDE;">Content</div>$(document).ready(function(){
var originalBG = $(".node-referenz").css("background-color");
var fadeColor = "#5EBBD7";
$(".node-referenz").hover(function() {
$(this).animate({ backgroundColor: fadeColor }, 500);
}, function() {
$(this).animate({ backgroundColor: originalBG }, 500);
});
});
Funktioniert leider nicht.
am 17.08.2010 - 14:53 Uhr
Funktioniert leider nicht. Weiß leider echt nicht mehr weiter.
Es funktioniert sogar folgendes:
$("div#header-07-nav").mouseover( function() {alert("berührt");
$(this).css("opacity",.4) // Sets starting opacity
Aber sobald er etwas animieren soll, geht nichts mehr ...
...$(this).stop().animate({ backgroundColor: "#a7bf51"}, 800);
},function() {
$(this).stop().animate({ backgroundColor: "#ffffff" }, 800);
});
Hast Du einen Link wo man
am 17.08.2010 - 15:13 Uhr
Hast Du einen Link wo man sich das Ganze einmal ansehen kann?
Für alle die mal das gleiche
am 18.08.2010 - 20:23 Uhr
Für alle die mal das gleiche Problem haben ->
die Konstellation funktioniert nur folgendermaßen richtig:
JQuery Update Modul
JQuery UI Plugin (nicht das Modul!, sondern das tatsächliche JQuery Plugin) in der Version 1.7.3 (Legacy)
Folgender Code um die Textfarbe zu animieren:
$(document).ready(function(){
$("SELECTOR").hover(function() {
$(this).stop().animate({ color: "FARBE ZU DER GEWECHSELT WERDEN SOLL"}, 100);
},function() {
$(this).stop().animate({ color: "URSPRÜNGLICHE FARBE" }, 900);
});
});
Das Ganze kann natürlich variiert werden. Verwendet man anstatt $("SELECTOR").hover -> $("SELECTOR").toggle so kann man per Mausklicks die Zustände z.B. ändern.
Ich benötige etwas Hilfe bei
am 11.07.2011 - 21:31 Uhr
Ich benötige etwas Hilfe bei der Integration des Skripts für D7 ...
Das Skript habe ich erweitert:
(function ($) {$(document).ready(function(){
$("h2.node-title").hover(function() {
alert("TEST");
$(this).stop().animate({backgroundColor: "#00F"}, 100);
},
function() {
$(this).stop().animate({backgroundColor: "#F00" }, 900);
});
});
})(jQuery);
Außerdem habe ich das Modul "jQuery Update" installiert und – weil ich es nicht besser weiss – die Datei "jquery-ui-1.7.3.custom.min.js" aus "JQuery UI Plugin" in mein Template eingebunden.
Das Skript funktioniert bei mir bis zum Alert, aber leider tut sich danach nichts mehr ...
Im Status-Report steht "jQuery Update: jQuery 1.5.2 and jQuery UI 1.8.11"
Was muss ich mit dem "JQuery UI Plugin" machen? Gibt es sonst noch etwas, auf das ich achten kann?
Danke für jeden Hinweis!
EDIT: Sorry, ich hab's ... das Skript war nur noch nicht im Cache ... :-/ ... jetzt funktioniert's!
Ja Cache leeren ist immer
am 11.07.2011 - 21:34 Uhr
Ja Cache leeren ist immer hilfreich ... ;)