Hallo liebe PSD tutorials Mitglieder ich habe ein Problem bei einem script und hoffe ihr könnt mir weiter helfen.
Es geht im wesentlichen darum dass ich einen Div auf und ab hüpfen lassen möchte,
dies versuche ich mit einer do while schleife zum zu setzen.
Nun mein Problem sobald mein Script bei der do ankommt wird das skript mit Timout abgebrochen hier die meldung aus dem Debugger:
Error: Script terminated by timeout at:
.each@https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js:2:2749
n.prototype.each@https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js:2:843
.queue@https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js:3:1785
.animate@https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js:3:28277
CircleDown@file:///E:/Web%20Projekte/oneinall/js/mhphoto.js:89:2
CircleUp@file:///E:/Web%20Projekte/oneinall/js/mhphoto.js:85:57
circle_hop@file:///E:/Web%20Projekte/oneinall/js/mhphoto.js:95:2
@file:///E:/Web%20Projekte/oneinall/js/mhphoto.js:19:1
Sobald ich jedoch auf scriptstoppen klicke wird die schleife ausgeführt und mein container hüpft.
Da der Absturz keine Option ist hoffe ich ihr könnt mir weiter helfen.
hier noch der Quelltext:
//setTimeout("Blur()",2000)
window.onload = init;
function init(){
document.getElementById("#header_blur").onload = siteanimation();
}
function siteanimation() {
$(".h1_animated").css('display' ,'none');
$(".h2_animated").css('display' ,'none');
$("#circle").css('display' ,'none');
setTimeout('bluranimation("#header_blur", 0, 7, 500)', 50);
setTimeout('bluranimation("#header_blur", 7, 0, 300)', 10);
setTimeout('bluranimation("#header_blur", 0, 5, 500)', 100);
setTimeout('bluranimation("#header_blur", 5, 0, 1000)', 500);
setTimeout(function(){$(".h1_animated").fadeIn(1200);}, 1000);
setTimeout(function(){$(".h2_animated").fadeIn(800);}, 4500);
setTimeout(function(){$("#circle").fadeIn(800);}, 7000);
setTimeout('circle_hop()', 7800);
animation();
stop();
}
function bluranimation(element, atBegin, size, duration) {
$(function() {
$({blurRadius: atBegin}).animate({blurRadius: size},{
duration: duration,
easing: 'swing',
step: function() {
console.log(this.blurRadius);
var blursize = this.blurRadius
$(element).css({
"filter": "blur("+blursize+"px)"
});
}
});
});
stop();
}
//funktion für blur
function BlurElement(element, size) {
var filterVal = 'blur('+size+'px)';
$(element)
.css('filter' ,filterVal)
.css('webkfilter' ,filterVal)
.css('mozfilter' ,filterVal)
.css('ofilter' ,filterVal)
.css('msfilter' ,filterVal);
}
//funktion zum animieren des logos
function animation() {
setTimeout(function(){
//$(".h1_animated").fadeIn(800);
$(".h1_animated").letterfx({
"fx": "spin",
"pattern" : /([MPoorpy])/ig,
"timing": "300",
"fx_duration": "1000ms",
"letter_end": "stay",
"element_end": "stay",
"onElementComplete": function($p, $element, LetterFXObj){
//$(".h2_animated").fadeIn(800);
$(".h2_animated").letterfx({
"fx": "mh_fall",
"words": true,
"timing": "300",
"letter_end": "stay",
"element_end": "stay",
"fx_duration": "1000ms"
});
}
});
}, 1000);
stop();
}
function CircleUp(){
$("#circle").animate({ "margin-top": "+=100px" }, 400, CircleDown());
}
function CircleDown(){
$("#circle").animate({ "margin-top": "-=100px" }, 400);
}
hier besagte Funktion:
function circle_hop() {
do {
CircleUp();
stop();
} while ($(document).scrollTop() < 100);
}
//funktion zur Head verkleinerung beim scrollen
$(window).scroll(function() {
if ($(document).scrollTop() > 10)
{
$("#header").addClass("shrink");
$("#header_blur").addClass("shrink");
$("#circle").addClass("shrink");
}
else
{
$("#header").removeClass("shrink");
$("#header_blur").removeClass("shrink");
$("#circle").removeClass("shrink");
}
});
function spielwiese(){
$( "#clickme" ).click(function() {
$( "#book" ).animate({opacity: 0.25, left: "+=50", height: "toggle"}, 5000, function() { });
});
}
Es geht im wesentlichen darum dass ich einen Div auf und ab hüpfen lassen möchte,
dies versuche ich mit einer do while schleife zum zu setzen.
Nun mein Problem sobald mein Script bei der do ankommt wird das skript mit Timout abgebrochen hier die meldung aus dem Debugger:
Error: Script terminated by timeout at:
.each@https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js:2:2749
n.prototype.each@https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js:2:843
.queue@https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js:3:1785
.animate@https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js:3:28277
CircleDown@file:///E:/Web%20Projekte/oneinall/js/mhphoto.js:89:2
CircleUp@file:///E:/Web%20Projekte/oneinall/js/mhphoto.js:85:57
circle_hop@file:///E:/Web%20Projekte/oneinall/js/mhphoto.js:95:2
@file:///E:/Web%20Projekte/oneinall/js/mhphoto.js:19:1
Sobald ich jedoch auf scriptstoppen klicke wird die schleife ausgeführt und mein container hüpft.
Da der Absturz keine Option ist hoffe ich ihr könnt mir weiter helfen.
hier noch der Quelltext:
//setTimeout("Blur()",2000)
window.onload = init;
function init(){
document.getElementById("#header_blur").onload = siteanimation();
}
function siteanimation() {
$(".h1_animated").css('display' ,'none');
$(".h2_animated").css('display' ,'none');
$("#circle").css('display' ,'none');
setTimeout('bluranimation("#header_blur", 0, 7, 500)', 50);
setTimeout('bluranimation("#header_blur", 7, 0, 300)', 10);
setTimeout('bluranimation("#header_blur", 0, 5, 500)', 100);
setTimeout('bluranimation("#header_blur", 5, 0, 1000)', 500);
setTimeout(function(){$(".h1_animated").fadeIn(1200);}, 1000);
setTimeout(function(){$(".h2_animated").fadeIn(800);}, 4500);
setTimeout(function(){$("#circle").fadeIn(800);}, 7000);
setTimeout('circle_hop()', 7800);
animation();
stop();
}
function bluranimation(element, atBegin, size, duration) {
$(function() {
$({blurRadius: atBegin}).animate({blurRadius: size},{
duration: duration,
easing: 'swing',
step: function() {
console.log(this.blurRadius);
var blursize = this.blurRadius
$(element).css({
"filter": "blur("+blursize+"px)"
});
}
});
});
stop();
}
//funktion für blur
function BlurElement(element, size) {
var filterVal = 'blur('+size+'px)';
$(element)
.css('filter' ,filterVal)
.css('webkfilter' ,filterVal)
.css('mozfilter' ,filterVal)
.css('ofilter' ,filterVal)
.css('msfilter' ,filterVal);
}
//funktion zum animieren des logos
function animation() {
setTimeout(function(){
//$(".h1_animated").fadeIn(800);
$(".h1_animated").letterfx({
"fx": "spin",
"pattern" : /([MPoorpy])/ig,
"timing": "300",
"fx_duration": "1000ms",
"letter_end": "stay",
"element_end": "stay",
"onElementComplete": function($p, $element, LetterFXObj){
//$(".h2_animated").fadeIn(800);
$(".h2_animated").letterfx({
"fx": "mh_fall",
"words": true,
"timing": "300",
"letter_end": "stay",
"element_end": "stay",
"fx_duration": "1000ms"
});
}
});
}, 1000);
stop();
}
function CircleUp(){
$("#circle").animate({ "margin-top": "+=100px" }, 400, CircleDown());
}
function CircleDown(){
$("#circle").animate({ "margin-top": "-=100px" }, 400);
}
hier besagte Funktion:
function circle_hop() {
do {
CircleUp();
stop();
} while ($(document).scrollTop() < 100);
}
//funktion zur Head verkleinerung beim scrollen
$(window).scroll(function() {
if ($(document).scrollTop() > 10)
{
$("#header").addClass("shrink");
$("#header_blur").addClass("shrink");
$("#circle").addClass("shrink");
}
else
{
$("#header").removeClass("shrink");
$("#header_blur").removeClass("shrink");
$("#circle").removeClass("shrink");
}
});
function spielwiese(){
$( "#clickme" ).click(function() {
$( "#book" ).animate({opacity: 0.25, left: "+=50", height: "toggle"}, 5000, function() { });
});
}