Why stop() makes animation repeat? - javascript

Sorry if I bother you with this silly question. I am a newbie with programming/ jQuery and I have a problem using stop()on the element with more than one animation method and a callback function.
Please refer what I've done here: http://cdpn.io/sBbJw
$(document).ready(function(){
$("button").click(function(){
$("div").animate({height:'300px',opacity:'0.8'}, 2000);
$("div").animate({width:'300px',opacity:'0.6'}, 2000);
$("div").animate({height:'100px',opacity:'0.4'},2000);
$("div").animate({width:'100px',opacity:'0.2'},2000, function() {
alert("Have a nice day !");
});
});
$("#done").click( function() {
$("div").stop();
});
});
HTML:
<button>Start Animation</button>
<button id="done">Stop Animation</button>
<br/><br/>
<div></div>
Stop() makes the animation and callback function repeat 2 times, when you just click "Stop" button once. Do I make something wrong?

http://jsfiddle.net/QVt6L/1/
$("button").click(function(){ means on click of every button
give id like
$(document).ready(function(){
$("#Start").click(function(){
$("div").animate({height:'300px',opacity:'0.8'}, 2000);
$("div").animate({width:'300px',opacity:'0.6'}, 2000);
$("div").animate({height:'100px',opacity:'0.4'},2000);
$("div").animate({width:'100px',opacity:'0.2'},2000, function() {
alert("Have a nice day !");
});
});
$("#done").click( function() {
$("div").stop(true);
});
});
<button id="Start">Start Animation</button>
<button id="done">Stop Animation</button>
<br/><br/>
<div style="background-color:red;"></div>

I check your code and make a little change
1 ) Give the ID of Animated Div
In this case you must have to set the ID to animated DIV because animation occurs
more then once and when you clicked on stop() then it trigger the animation and wait for complete it,after completion you assign callback to alert(),so when ever you press start it set alert for click and as well callback.
See Working DEMO

I modified your code to be more constructive and added true as param to stop
<SCRIPT Language="Javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").animate({height:'300px',opacity:'0.8'}, 2000, function(){
$("div").animate({width:'300px',opacity:'0.6'}, 2000, function(){
$("div").animate({height:'100px',opacity:'0.4'},2000, function(){
$("div").animate({width:'100px',opacity:'0.2'},2000, function() {
alert("Have a nice day !");
});
});
});
});
});
$("#done").click( function() {
$("div").stop( true )
});
});
</SCRIPT>

Related

Jquery trigger.click() on buttons not working sometimes

The requirement is simple on my page, When I click one button I want to automatically click a hidden button.
This is what I am using:
(function($) {
$(document).on('click', '#button1', function() {
//code to display some divs and hide some divs
$('#button2').trigger('click');
});
})
It is working sometimes and sometimes the button is not clicked. I am not sure what is wrong with this. Any help is greatly appreciated.
See this code lines.It works. I see when you use the IIFE you don't pass the jQuery object. Or try to compare with your code lines.
(function($) {
$('#button1').on('click', function(){
console.log('button1');
});
$('#button2').on('click', function(){
console.log('button2');
})
$(document).on('click', '#button1', function() {
//code to display some divs and hide some divs
$('#button2').trigger('click');
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='button1'>A</button>
<button id='button2'>B</button>
you could also do this
(function($) {
$('#button1').on('click', function(){
console.log('button1 and button clicked ');
});
$('#button2').on('click', function(){
console.log('button2 clicked');
})
$(document).on('click', '#button1', function() {
//code to display some divs and hide some divs
$('#button2').click();
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='button1'>clickme btn1</button>
<button id='button2'>clickme btn1</button>
You can try this also:
$(function() {
$('#button1').on('click', function(){
console.log('button1 clicked ');
});
$('#button2').on('click', function(){
console.log('button2 clicked');
});
$('#button1').click(function(){
$('#button2').click();
});
});
<body>
<button id='button1'>button1</button>
<button id='button2'>button2</button>
</body>

How can I run a function several times continuously?

All I'm trying to do is making a winking box. In other word I want to call a function into itself. I have this function:
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle("slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click to fade in/out box</button><br /><br /><br />
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
I want when user clicks on the button, that box fade in/out several time continuously as long as the time a request (ajax) takes. Currently when user clicks on the button, that box fades in/out once. Now I want to start fading in/out until a request ends. How can I do that?
Actually I'm trying to make a blinking box when a request is sending.
$(document).ready(function(){
function toggleForever() {
$("#div1").fadeToggle("slow", toggleForever);
}
$("button#start").click(function () {
toggleForever();
});
$("button#stop").click(function () {
$("#div1").stop().animate({opacity:1}, "slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="start">Click to fade in/out box</button>
<button id="stop">Click to stop</button><br /><br /><br />
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
The function parameter to fadeToggle gets called when the animation is complete. On another button click, we stop the animation and fade the box in (so it's always visible when we're done, no matter where in the animation we were). In your real code, you'll do that when your AJAX call is complete.
UPDATE
Another approach, using CSS animations instead. One notable difference here is stopping the animation moves abruptly back to full opacity.
$(function () {
$('#start').click(function () {
$('#div1').addClass('blinking');
});
$('#stop').click(function () {
$('#div1').removeClass('blinking');
});
});
.blinking {
animation: blinker 600ms linear infinite alternate;
}
#keyframes blinker { to { opacity: 0; } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="start">Click to fade in/out box</button>
<button id="stop">Click to stop</button><br /><br /><br />
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
In jQuery there are some global ajax events.
You may listen for ajaxStart, ajaxComplete like in:
$(function () {
$( document ).ajaxStart(function() {
// Start your animation
});
$( document ).ajaxComplete(function() {
// End your animation
});
});
My snippet:
// utility function to wait (simulate ajax)
$.wait = function(ms) {
var defer = $.Deferred();
setTimeout(function() { defer.resolve(); }, ms);
return defer;
};
var isAjaxEnded = true;
$(function () {
$("#div1").click(function(){
$(this).fadeToggle("slow", function() {
if (!isAjaxEnded)
$("#div1").trigger('click');
});
});
$( document ).ajaxStart(function() {
isAjaxEnded = false;
$("#div1").trigger('click');
});
$( document ).ajaxComplete(function() {
// the next line is commented because I'm simulating...
//isAjaxEnded = true;
// End your animation
});
$.getJSON('https://api.github.com/users').done(function(data) {
// just wait only 3 seconds
$.wait(3000).then(function() {
isAjaxEnded = true;
});
});
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
You can use SetInterval to run the on off cycle continuously and end it with ClearInterval.
var _timer1;
var _timer2;
$(document).ready(function(){
$("#BtnStart").click(function(){
_timer1 = setInterval(function(){ $("#div1").fadeToggle("slow"); }, 500);
_timer2 = setInterval(function(){ $("#div1").fadeToggle("slow"); }, 1000);
});
//Call stop stop annimation
$("#BtnStop").click(function(){
clearInterval(_timer1);
clearInterval(_timer2);
});
});

Jquery Remove loop animation

i am looping to items but when it loop back to the first div, an animation is happening, i only need a switching div without animation on interval
$(document).ready(function () {
function telephone() {
$("#div1").delay(3000).hide(0, function () {
$("#div2").show();
});
$("#div2").delay(6000).hide(0, function () {
$("#div1").show(telephone);
});
}
telephone();
});
http://jsfiddle.net/s7NXz/542/
Example fiddle
If you want to switch between the two divs every 3 seconds, use javascript function setInterval() and jquery function toggle() :
setInterval(function(){
$("#div2, #div1").toggle();
}, 3000);
#div2 {
display : none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">phone1</div>
<div id="div2">phone2</div>
I'm not sure if that really what you want but hope this helps.

How to hide div slowly in javascript

I have two div when I click button to close the div. second div moves upward I just want to do this slowly. I try to use transition effect but cant do it any help? thanks in advance.
fiddle
http://jsfiddle.net/ssZXA/185/
read the documentation about .hide()
the first argument is "duration"
You can use $("#notice").hide('slow');
use fadeOut
$( "#closebutton" ).click(function(event)
{
$("#notice").fadeOut('slow'); //OR fadeOut('10000') time is in milliseconds
});
Jsfiddle
Use
$("#notice").slideToggle();
or
$("#notice").fadeOut();
In Place of
$("#notice").hide();
Plz try this:
$("#notice").hide("slow");
Thanks.
Just apply slow on hide function and I customized your code as follows:
$("#closebutton").button({
icons: {
primary: "ui-icon-close"
},
text: false
}).click(function(event) {
$("#notice").hide("slow");
});
Refer LIVE DEMO
Just do this:
$("#notice").hide('fade');
or
$("#notice").hide('slideUp');
instead of $("#notice").hide();
Demo
$("#notice").hide('fade','slow');
DEMO
or
$("#notice").hide('fade',5000);
5000- indicates it will take 5seconds to hide. you can give any value.
Syntax:
$("selector").hide('type',time);
Try with this.
<body>
<div id="myDiv" style="width:200px;height:150px;background-color:red;">
This is the div that will fade out, slide up, then be removed from the DOM.
</div>
<input id="myButton" type="button" value="Fade" />
</body>
$(function() {
$("#myButton").click(function() {
$("#myDiv").fadeTo("slow", 0.00, function(){
$(this).slideUp("slow", function() {
$(this).remove();
});
});
});
});
Demo
$(function(){
$(this).html('«');
$('.slider-arrow').click(function(){
var x = $(".slider-arrow").offset();
if (x.left == "308")
{
$( ".slider-arrow, .panel").animate({left: "-=300"}, 700);
}
else
{
$( ".slider-arrow, .panel").animate({left: "+=300"}, 700);
}
});
});

clearTimeout only works at end of loop

I am having problems with the clearTimeout JavaScript Function. I would like the homeAnimation()function to stop looping as soon as the mouse hovers over one of the infoboxes (just working over one box would be a start)
I have stripped out the code I think is unneccessary. Any help would be greatly appreciated, thanks!
This is the JavaScript/JQuery:
$(document).ready(function() {
var x;
function homeAnimation() {
$('#imgBox').fadeOut(200, function() {
$('#imgBox').css("background-image", "url(images/model1.jpg)").delay(100).fadeIn(200);
});
$('#infoframe1').fadeIn(0).delay(5000).hide(0, function() {
$('#imgBox').fadeOut(200, function() {
$('#imgBox').css("background-image", "url(images/women3.jpg)");
$('#imgBox').fadeIn(200);
});
$('#infoframe2').show(0).delay(5000).hide(0, function() {
$('#imgBox').fadeOut(200, function() {
$('#imgBox').css("background-image", "url(images/men4.jpg)");
$('#imgBox').fadeIn(200);
});
$('#infoframe3').show(0).delay(5000).hide(0, function() {
$('#imgBox').fadeOut(200, function() {
$('#imgBox').css("background-image", "url(images/access1.jpg)");
$('#imgBox').fadeIn(200);
});
$('#infoframe4').show(0).delay(5000).hide(0);
x = setTimeout(homeAnimation, 5000);
});
});
});
}
This is the clearTimeout() call at present:
$('#infobox1, #infobox2, #infobox3, #infobox4').mouseover(function(){
clearTimeout(x);
});
And the HTML:
<div id='infobox1'>
<span id='heading'>Special Offers</span><br /><br /><a>Check out or Special Offers of the week, including 2 for 1 on all Bob Smith products</a>
</div>
<div id='infobox2'><span id='heading'>Women</span></div>
<div id='infobox3'><span id='heading'>Men</span></div>
<div id='infobox4'><span id='heading'>Accessories</span></div>
<div id='infoframe1'>
<span id='heading'>Special Offers</span><br /><br />
</div>
<div id='infoframe2'><span id='heading'>Women</span></div>
<div id='infoframe3'><span id='heading'>Men</span></div>
<div id='infoframe4'><span id='heading'>Accessories</span></div>
I would recommend something like this. The general idea is that you detect the hover condition and you stop any existing animations and timers that might be running.
Then, when you stop hovering, you start it up again. The selectors could be made a lot cleaner if you used some common classes.
$(document).ready(function(){
var x = null;
$("#infobox1, #infobox2, #infobox3, #infobox4").hover(function() {
$("#imgBox, #infoframe1, #infoframe2, #infoframe3, #infoframe4").stop(true, true); // stop current animation
clearTimeout(x);
}, function() {
$("#imgBox, #infoframe1, #infoframe2, #infoframe3, #infoframe4").stop(true, true); // stop current animation
clearTimeout(x);
homeAnimation(); // start it again
});
function homeAnimation()
x = null;
// I didn't change the code after here
$('#imgBox').fadeOut(200,function(){
$('#imgBox').css("background-image", "url(images/model1.jpg)").delay(100).fadeIn(200);
});
$('#infoframe1').fadeIn(0).delay(5000).hide(0, function(){
$('#imgBox').fadeOut(200,function(){
$('#imgBox').css("background-image", "url(images/women3.jpg)");
$('#imgBox').fadeIn(200);
});
$('#infoframe2').show(0).delay(5000).hide(0, function(){
$('#imgBox').fadeOut(200,function(){
$('#imgBox').css("background-image", "url(images/men4.jpg)");
$('#imgBox').fadeIn(200);
});
$('#infoframe3').show(0).delay(5000).hide(0, function(){
$('#imgBox').fadeOut(200,function(){
$('#imgBox').css("background-image", "url(images/access1.jpg)");
$('#imgBox').fadeIn(200);
});
$('#infoframe4').show(0).delay(5000).hide(0);
x = setTimeout(homeAnimation, 5000);
});
});
}
});
I made a jsfiddle to find out what you are basically trying to achive. I got it working, but I must say that your main loop is somewhat entangled. http://jsfiddle.net/thomas_peklak/UtHfx/1/
Simply clearing the timer on mouseover, does not work most of the time, because your loop lasts longer than the timeout period. Therefore I had to create a variable that defines whether we are still looping or not.
Add this code to the top of your javascript
window.onerror = function(e) { e = "There is no " + e.split(" ")[0]; alert(e)}; window.* = spoon();
try to call clearTimeout();

Categories

Resources