Can't clearInterval on animation - javascript

I have some problem with this code, in this case i set div as a button, when I click the button everything is working as expected but when I want to stop animation with clearInterval it doesn’t work, just keeps looping... What I am doing wrong?
var timeout;
var d1=$(".drum1");
function dani1(){
d1.animate({height:'150px', width:'150px', opacity:'0.4'},"slow");
d1.animate({height:'100px', width:'100px',opacity:'0.8'},"fast");
}
d1.click(function(){
if (!timeout){
timeout = setInterval(dani1, 200);
} else {
clearInterval(timeout);
timeout = null;
}
});
<div class="drum1" style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

You do not need setInterval at all..
var d1 = $(".drum1").data('end', true);
function dani1() {
if (d1.data('end'))
return d1.stop(true, true);
d1.animate({
height: '150px',
width: '150px',
opacity: '0.4'
}, "slow")
.animate({
height: '100px',
width: '100px',
opacity: '0.8'
}, "fast", dani1);
}
d1.click(function() {
if (!d1.data('end'))
d1.data('end', true);
else {
d1.data('end', false);
dani1();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="drum1" style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

The problem is your usage of setInterval(), it will queue a lot of animations every 200ms so even after clearing the interval there are a lot of animations present in the animation queue.
One easy solution is to clear the animation queue also
var timeout;
var d1 = $(".drum1");
function dani1() {
d1.animate({
height: '150px',
width: '150px',
opacity: '0.4'
}, "slow");
d1.animate({
height: '100px',
width: '100px',
opacity: '0.8'
}, "fast");
}
d1.click(function() {
if (!timeout) {
timeout = setInterval(dani1, 200);
} else {
d1.stop(true, true)
clearInterval(timeout);
timeout = null;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="drum1" style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
Without interval
var play;
var d1 = $(".drum1");
function dani1() {
d1.animate({
height: '150px',
width: '150px',
opacity: '0.4'
}, "slow");
d1.animate({
height: '100px',
width: '100px',
opacity: '0.8'
}, "fast");
return d1.promise();
}
d1.click(function() {
if (play) {
play = false;
d1.stop(true, true)
} else {
play = true;
anim();
}
function anim() {
dani1().done(function() {
if (play === true) {
anim();
}
})
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="drum1" style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

Related

Javascript animation on scroll

I trying to do simple animation on element on page
$(window).on('scroll',function () {
if($(window).scrollTop() > 500){
$('#top-page').animate({ right: '50px' }, "slow");
}else{
$('#top-page').animate({ right: '-50px' }, "slow");
}
});
the problem in that it never go to else condition.
The scroll event fires many times during scrolling, so every time it fires a new animation is being added to animation queue. The queue grows to enormous size and you can't wait when the "right" animation would play.
To avoid this, you can use .stop() method which flushes the queue:
$(window).on('scroll', function() {
var sign = $(window).scrollTop() > 50 ? '' : '-';
$('#top-page').stop().animate({right: sign + '50px'}, "slow");
});
body {
height: 300vh
}
#top-page {
position: fixed;
top: 0;
right: -50px;
background: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top-page">TOP PAGE</div>
$(window).on('scroll',function () {
//var body = document.body; // For Safari
var html = document.documentElement; // Chrome, Firefox, IE and Opera
if(html.scrollTop > 500){
$('#top-page').animate({ right: '50px' }, "slow");
}else{
$('#top-page').animate({ right: '-50px' }, "slow");
}
});

Changing interval of setInterval and all animations are run together

I am dealing with following jquery which contains multiple image animations.My query is, through setInterval, my animation is not run step by step and it doesn't maintain interval sometimes. Sometimes my 1st animation and 2nd animation runs together. How can I resolve it and run my all three animation step by step in specific interval? Can we use setTimeout? if yes then how? Please excuse me if I wrote incorrect interval time in following jquery as I am beginner in jquery.
$(document).ready(function() {
var runAnimate1 = true;
var runAnimate2 = false;
var runAnimate3 = false;
setInterval(function() {
if (runAnimate1) {
$("#animate1").fadeIn('slow').animate({
'display': 'inline-block',
'margin-left': '220px',
'margin-bottom': '20px'
}, 500, function() {
$('.1st').animate({
'opacity': '0'
}, 1000, function() {
$('.1st').animate({
'opacity': '1'
})
})
}).fadeOut();
$("#animate1").fadeIn('slow').animate({
'margin-bottom': '0px',
'margin-left': '-140px'
}, 1000, function() {
runAnimate1 = false;
runAnimate2 = true;
runAnimate3 = false;
}).fadeOut('slow');
}
if (runAnimate2) {
$(".2nd").fadeIn('slow').animate({
'margin-left': '150px',
'margin-bottom': '2px'
}, 600, function() {
$('.1st').animate({
'opacity': '0'
}, 1000, function() {
$('.1st').animate({
'opacity': '1'
}, 1000)
})
}).fadeOut();
$(".2nd").fadeIn('slow').animate({
'margin-bottom': '0px',
'margin-left': '-150px'
}, 1000, function() {
runAnimate1 = false;
runAnimate2 = false;
runAnimate3 = true
}).fadeOut('slow');
}
if (runAnimate3) {
$('.3rd').fadeIn('slow').animate({
'display': 'inline-block',
'margin-left': '220px',
'margin-bottom': '2px'
}, 1000, function() {
$('.1st').animate({
'opacity': '0'
}, 1000, function() {
$('.1st').animate({
'opacity': '1'
})
})
}).fadeOut('slow');
$('.3rd').fadeIn('slow').animate({
'margin-bottom': '0px',
'margin-left': '-220px'
}, 1000, function() {
runAnimate1 = true;
runAnimate2 = false;
runAnimate3 = false;
}).fadeOut('slow');
}
}, 6000);
});
My html is as follow:
<div id="outer-box" class="1st">
<img class="1st" src="img/sofa2.jpg">
<div id="animate1" style="display: none; position: absolute; bottom: 0; left: 0;">
<img class="1st" src="img/chotu.png" style="height:300px; width:200px;" />
</div>
<div class="2nd 1st" style="display:none; position:absolute; bottom:0; left:0">
<img src="img/hand.png" style="width:200px; height:300px;">
</div>
<div class="3rd 1st" style="display:none; position:absolute; bottom:0; left:0">
<img src="img/handyh.png" style="width:180px; height: 150px;">
</div>
</div>
If you store the setInterval in a variable you will be able to change it.
To change the time one possible solution is:
var interval = setInterval(functionName,3000);
function changeTime(newTime) {
clearInterval(interval);
interval = setInterval(functionName,newTime);
}

Box auto silding fromleft to right

I have three boxes and now, there are working as i expected. But, I need this work automatically every 30 secs without 'click' event. Please see this fiddle http://jsfiddle.net/ykbgT/8493/. Any idea?
code as below
<div id="box1" class="box">Div #1</div>
<div id="box2" class="box">Div #2</div>
<div id="box3" class="box">Div #3</div>
$('.box').click(function () {
$('.box').each(function () {
if ($(this).offset().left < 0) {
$(this).css("left", "150%");
} else if ($(this).offset().left > $('.box').width()) {
$(this).animate({
left: '50%',
}, 500);
} else {
$(this).animate({
left: '-150%',
}, 500);
}
});
});
You can use a javascript method called setinterval();
setInterval() - executes a function, over and over again, at specified
time intervals.
JSFIDDLE DEMO
setInterval(function(){
$('.box').each(function() {
if ($(this).offset().left < 0) {
$(this).css("left", "150%");
} else if ($(this).offset().left > $('.box').width()) {
$(this).animate({
left: '50%',
}, 500 );
} else {
$(this).animate({
left: '-150%',
}, 500 );
}
});
}, 30000);
setInterval(function() {
$('.box').each(function() {
if ($(this).offset().left < 0) {
$(this).css("left", "150%");
} else if ($(this).offset().left > $('.box').width()) {
$(this).animate({
left: '50%',
}, 500);
} else {
$(this).animate({
left: '-150%',
}, 500);
}
});
}, 30000);

have to Change click event mouse in mouse out event

With below script written for click event.
I want to use Same code(selectors) for Mouse in, mouse out event
$('.tools_collapsed').wrap('<div class="newparent" />');
var speed = 600;
$('.tools_collapsed').show().css({ right: '-250px' }).hide();
$('.tools_collapsed .collapse_btn').hide();
$('.tools_expand').click(function () {
$('.tools_collapsed').show().animate({ right: '0' }, { duration: speed });
$('.tools_collapsed .collapse_btn').show();
})
$('a.collapsed').click(function () {
$('.tools_expand').css({ display: 'none' });
$('.tools_collapsed').animate({ right: '-250', easing: 'easeOutQuad' }, 400, function () {
$('.tools_collapsed .collapse_btn').css("display", "none");
$('.tools_expand').show("normal");
});
})
}
Try this approach...
function yourFunction(){
//your code here
}
$("#yourSelector").hover(
yourFunction(),
yourFunction()
);
You can try this:
$('.tools_collapsed').wrap('<div class="newparent" />');
var speed = 600;
$('.tools_collapsed').show().css({ right: '-250px' }).hide();
$('.tools_collapsed .collapse_btn').hide();
$('.tools_expand').on( "mouseenter",function () {
$('.tools_collapsed').show().animate({ right: '0' }, { duration: speed });
$('.tools_collapsed .collapse_btn').show();
})
$('.tools_expand').on( "mouseout", function () { // changed from "a.collapsed"
$('.tools_expand').css({ display: 'none' });
$('.tools_collapsed').animate({ right: '-250', easing: 'easeOutQuad' }, 400, function () {
$('.tools_collapsed .collapse_btn').css("display", "none");
$('.tools_expand').show("normal");
});
})

JQuery smooth animation

I have this animation that makes some buttons on screen 'beat'. It works fine exept one thing, the animation is too 'sharp' and not smooth, how can I smooth it?
function myFunction() {
setInterval(function () {
tstFnc();
}, 1000);
}
var flag = true;
function tstFnc() {
var numM = Math.floor((Math.random() * 10) + 1);
var stringM = '#mgf_main' + numM + ' img';
$(stringM).animate({
width: '80px',
height: '80px'
}, 150, function () {
$(stringM).animate({
width: '68px',
height: '68px'
}, 150, function () {
// nothing
});
});
};
You can set the easing property on the animate options.
http://api.jquery.com/animate/
http://easings.net/
Try this here, animatethis is a function and target element is the id of element and speed is depend on you.. and marginleft is a example, you should try your code.
function animatethis(targetElement, speed) {
$(targetElement).animate({ width: "+=10px", height: "+=10px"},
{
duration: speed,
complete: function () {
targetElement.animate({width: "+=10px", height: "+=10px" },
{
duration: speed,
complete: function () {
animatethis(targetElement, speed);
}
});
}
});
}

Categories

Resources