Antworten zum Thema „Brauche eure Hilfe .animate Funktion in Do“

[styler173]

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() { });
});



}

 

[Gelöschtes Mitglied 633957]

Hallo @styler173,

wenn es nur um das Wiederholen einer Animation geht, würde ich auf js (jQuery) verzichten und mich auf CSS beschränken. Es gibt dort die Eigenschaft "animation-iteration-count" die man auf "unendlich" setzen kann.
Hier ein Beispiel

P.S. Kennst Du schon animate.css?

 

[styler173]

Hey cool nein kannte ich noch nicht ich habs nun anderst gelöst aber danke für den Tip

meine Lösung die Funktionen rufen sich gegenseitig auf bis gescrollt wird
function CircleUp(){

$("#circle").animate({ "margin-top": "+=100px" }, 400, CircleDown());
}

function CircleDown(){
$("#circle").animate({ "margin-top": "-=100px" }, 400,function(){if($(document).scrollTop() < 100){CircleUp();};});
}