setInterval- Javascript not working

Posted by Sharpcnet under JavaScript on 6/17/2014 | Points: 10 | Views : 648 | Status : [Member] | Replies : 1
Frameworks used - jQuery, textillate.js

Trying to loop a function.

It's a simple text animation - The text will

1.Fade in left letter by letter and then

2.Fade out up letter by letter.

3.This will repeat, but the text will appear again at another random location on the page.

When I set the interval delay to 1000, the text appears 4 times in all with a gap of 1 sec each. The first time, the text appears with fade in left, the second & third the text just flashes as a whole and finally, the fade out happens letter by letter.

So, I set the delay to 4700. The animation works as desired, but it is not looping.

http://jsfiddle.net/y5C4G/3/

The callback function in textillate wasn't working too, so i chose setInterval.

HTML :

<span class="brand">
<h1>
<ul class="texts">
<li>E L Y S I U M</li>
<li></li>
</ul>
</h1>
</span>


JS :

$(window).bind("load", function () {

function ShowBrand() {
var docHeight = $(document).height();
var docWidth = $(document).width();

$newSpan = $(".brand");
spanHeight = $newSpan.height();
spanWidth = $newSpan.width();

maxHeight = docHeight - spanHeight;
maxWidth = docWidth - spanWidth;

$newSpan.show().css({
top: Math.floor(Math.random() * maxHeight),
left: Math.floor(Math.random() * maxWidth)
}).textillate({
in: {effect:'fadeInLeft'},
out: {effect:'fadeOutUp'}
});
}

setInterval(ShowBrand,4700);

});





Responses

Posted by: Ajay.Kalol on: 7/9/2014 [Member] Starter | Points: 25

Up
0
Down
it will not work. because SetInterval function is not able to find ShowBrand() function as it is wrapped in Load function. so you should write like below

$(window).bind("load", function () {
ShowBrand() ;
});



function ShowBrand() {

var docHeight = $(document).height();

var docWidth = $(document).width();



$newSpan = $(".brand");

spanHeight = $newSpan.height();

spanWidth = $newSpan.width();



maxHeight = docHeight - spanHeight;

maxWidth = docWidth - spanWidth;



$newSpan.show().css({

top: Math.floor(Math.random() * maxHeight),

left: Math.floor(Math.random() * maxWidth)

}).textillate({

in: {effect:'fadeInLeft'},

out: {effect:'fadeOutUp'}

});
}
setInterval(ShowBrand,4700);





Ajay
ajaypatelfromsanthal.blogspot.in

Sharpcnet, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response