PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Problem mit jQuery animate


darph
2009-09-05, 18:12:09
nach document ready wird the funktion landing aufgerufen. Da passiert dann jede Menge jquery magic:

$.fn.wait = function(time, type) {
time = time || 1000;
type = type || "fx";
return this.queue(type, function() {
var self = this;
setTimeout(function() {
$(self).dequeue();
}, time);
});
};

// load the content into the red frame
function load_homePage() {
//var content = $("#home_content").html();
//$("#landing_border").html("").html(content);
//$("#to_insert").css("opacity", "1");
$("#landing_border").css("cursor", "default");
$("#to_insert").fadeTo(1000, 1.0)
}

// make the red frame big again
function move_home() {
$("#enter_button").fadeOut(500, function() {
$("#landing_headline").fadeOut(500, function() {
$("#landing_border").animate({ //make frame big
width: "550px",
height: "550px",
borderWidth: "26px",
marginTop: "0%"
}, 2000, function() {
$("#landing_border").animate({ // move frame to left side
marginLeft: "0px"
}, 1000, function() {
$("#home").animate({ //change background color to gray
backgroundColor : "#c4c4c7"
}, 1000, function() { //resize the moving frame
$("#slide_wrapper").css({"width" : "602px"});
$(".slide").css({"width" : "602px"});
// frame reverted to original position
// let's load the content
load_homePage();
})
})
})
})
});
}


// start the initial animation
//
function landing() {
$("#landing_border").wait(3000) // begin animation after wait
.css("borderWidth","26px")
.animate({
width: "100px",
height: "100px",
borderWidth: "7px",
marginTop: "25%"
}, 2000, function() { // blend in buttons
$("#landing_headline").fadeTo(1000,1.0, function() {
$("#enter_button").fadeTo(800,1.9, function() {
$("#landing_border")
.css("cursor", "pointer")
.click( function() {
// now let's move back if clicked
move_home()
}) // remove to disable autostart
})
})
});
}


In Safari funktioniert alles. In Firefox funktioniert alles, bis auf die animate-funktion mit dem Kommentar " // move frame to left side". Das springt und animiert nicht. Alle anderen Animationen funktionieren auch im Firefox. Nur diese eine nicht.

Jemand eine Idee, warum?

DanMan
2009-09-05, 18:39:01
Hat das Element denn explizit einen "margin-left" zu dem Zeitpunkt? Vielleicht besteht der Ff ja drauf. Immer schwierig zu sagen ohne es in Aktion zu sehen.

darph
2009-09-05, 18:51:25
es hat margin: auto, ist also zentriert. Dann soll es nach links an den Rand schweben.

Es bewegt sich ja auch, es springt halt nur eben von mitte nach links, anstatt langsam zu wandern.

Leider ist das Netz hier im Hotel zu schlecht, als daß ich es hochladen könnte. Vielleicht krieg ich's morgen hochgeladen.

DanMan
2009-09-05, 19:21:00
Einmal langt, bin ja nicht taub. ;-)

Setze mal probeweise bevor du es animierst explizit die derzeitige Position, indem du den margin-left berechnest und zuweist.

darph
2009-09-06, 08:09:25
*seufz*

Das war's. Danke.

DanMan
2009-09-06, 15:10:24
*seufz*

Das war's. Danke.
Dacht ich mir es doch. Hatte auch schon so ein ähnliches Problem.

You're welcome.