I've read through all post related to clearInterval, but somehow just can't make it work... What the script does is the interval will be set once the ".xmas-title" change the image. And the interval will be cleared once the mouse click.
var animation;
$(".xmas-title").delay(4000).fadeIn(400, function(){
bear_shake(true);
});
$(".xmas-more").delay(4200).fadeIn(400, function(){
$('.bg-xmas').css( 'cursor', 'pointer' );
$(".bg-xmas").click(function(){
show_msg();
bear_shake(false);
});
});
function bear_shake(bool){
if(bool){
animation = setInterval(function(){
$(".xmas-bear").delay(200).fadeOut(0, function(){
$(".xmas-bear").children("img").attr('src', 'images/xmas/xmas-bear_o1.png');
}).fadeIn(0);
$(".xmas-bear").delay(200).fadeOut(0, function(){
$(".xmas-bear").children("img").attr('src', 'images/xmas/xmas-bear_o2.png');
}).fadeIn(0);
},0);
console.log('true');
}else{
clearInterval(animation);
console.log('false');
$(".xmas-bear").children("img").attr('src', 'images/xmas/xmas-bear.png');
}
}
Thank you guys, it seems I miss the basic thing and just tried to make things difficult on my own. I've combine all you guys' opinions, and get it works now. function bear_shake rewrite as below:
it now looks clear and simple for me, thank you all. and I'm wondering is there any other better or smarter way to do this?