Currently I had one infinite loop animation, and that is a few element on the loop like box1, box2, box3, something like a rotating sushi.
When I click the box it will pop up something information and stop the animation, after 4 sec it will reanimate again.
But the problem I facing now is when after 4sec reanimate the speed looks very slow because of the animate duration.
Here is my code.
var timeoutBox;
$('.sushi_box').on('click', function(){
$('.sushi_item').removeClass('active');
$(this).parent().addClass('active');
// here another code for stop the sushi roll.
$('.total_roll').clearQueue().stop();
// after 4 sec hide box;
clearTimeout(timeoutBox);
timeoutBox = setTimeout(function(){
$('.sushi_item').removeClass('active');
// here another code for reanimate the sushi roll.
animateLoop();
}, 4000)
})
function animateLoop(){
var originWidth = $('.sushi_roll.origin').outerWidth(true);
$('.total_roll').animate({ "left": -originWidth }, {
easing:"linear",
duration:5000,
complete: function(){
$('.total_roll').css({ "left": 0});
originNumber++;
console.log(originNumber);
if(originNumber == 1){
console.log(1);
var origin = $('.sushi_roll.origin').html();
$('.sushi_roll.origin').remove();
$('.total_roll').append('<div class="sushi_roll origin">'+origin+'</div>');
var $sushiWidth = $('.sushi_roll .sushi_item').outerWidth(true);
var $sushiHeight = $('.sushi_item').outerHeight(true);
var $sushiOrginLength = $('.sushi_roll.origin .sushi_item').length;
var $sushiCloneLength = $('.sushi_roll.clone .sushi_item').length;
$('.sushi_roll.origin').css({
"width" : $sushiOrginLength*$sushiWidth,
"height" : $sushiHeight
});
} else if(originNumber == 2){
console.log(2);
var clone = $('.sushi_roll.clone').html();
$('.sushi_roll.clone').remove();
$('.total_roll').append('<div class="sushi_roll clone">'+clone+'</div>');
var $sushiWidth = $('.sushi_roll .sushi_item').outerWidth(true);
var $sushiHeight = $('.sushi_item').outerHeight(true);
var $sushiOrginLength = $('.sushi_roll.origin .sushi_item').length;
var $sushiCloneLength = $('.sushi_roll.clone .sushi_item').length;
$('.sushi_roll.clone').css({
"width" : $sushiOrginLength*$sushiWidth,
"height" : $sushiHeight
});
}
if(originNumber>=2){
originNumber=0;
}
animateLoop();
}
});
}
animateLoop();
Aucun commentaire:
Enregistrer un commentaire