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?
$.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?