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);
});
});
Related
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.
I have to hide a textbox only if the user hovers out > 2 seconds.
<div id="content">
<input type="text" id="txt1" />
</div>
$('#content').on('mouseleave', function(){
$('#txt1').delay(2000).hide();
});
This will wait for 2 seconds before hiding the textbox. But if the user comes back within 2 seconds it will still hide. How to prevent that from happening?
Use setTimeout/clearTimeout instead:
var clr;
$('#content').on('mouseleave', function () {
clr = setTimeout(function () {
$('#txt1').hide();
}, 2000)
}).on('mouseenter', function () {
clearTimeout(clr)
})
Also note that the delay in your example won't work at all since the .delay() method delays the execution of functions that follow it in the standard effects queue or with a custom queue. It won't delay the no-arguments forms of .show() or .hide() which do not use the effects queue.
jsFiddle example
Use the good ol' fashion setTimeout and clearTimeout
var leaveTimeout;
$('#content').on('mouseleave', function() {
leaveTimeout = setTimeout(function() {
$('#txt1').hide();
}, 2000);
})
.on('mouseenter', function() {
clearTimeout(leaveTimeout);
});
How about a simpler CSS solution: http://jsfiddle.net/2Jtrb/2/.
HTML:
<div id="content">
<input type="text" id="txt1" />
</div>
CSS:
div {
outline: 1px dotted #000;
}
div > input {
visibility: hidden;
-webkit-transition: visibility 2s;
transition: visibility 2s;
}
EDIT: the input will also stay visible if it is focused.
div:hover > input, input:focus {
visibility: visible;
transition-duration: 0s;
}
Try this...
var theTimer;
$('#content').on('mouseleave', function(){
theTimer = setTimeout(function() {
$('#txt1').hide();
}, 2000);
});
$('#content').on('mouseenter', function(){
clearTimeout(theTimer);
});
DEMO
If you use setTimeout you can cancel the timeout if the user enters the text area again. That code looks something like:
var timeoutHandle;
$('#content').on('mouseleave', function(){
timeoutHandle = setTimout(
function () {
timeoutHandle = undefined;
$('#txt1').hide();
}, 2000);
});
$('#content').on('mouseenter', function(){
if (timeoutHandle) clearTimeout(timeoutHandle);
});
By the way, this is similar to what other plugins provide so you might consider looking at the hover intent plugin here: http://cherne.net/brian/resources/jquery.hoverIntent.html.
You can try this:-
var typingTimer;
$('#content').on('mouseleave', function(){
typingTimer = setTimeout(function(){
$('#txt1').hide();
},2000);
});
$('#content').on('mouseenter', function(){
clearTimeout(typingTimer);
});
Use setTimeout function.
var timeout = null;
$('#content').on('mouseleave', function() {
timeout = setTimeout(function() { $('#text1').hide();
});
Then when the user enters the div, clear the timeout.
$('#content').on('mouseenter', function() {
clearTimeout(timeout);
});
I wrote this without looking anything up, so I hope I didn't messed up ;)
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>
I have an element in aspx page with class= "._aHide" it carrying a message, And it is shown repeatedly.
<div id="Message1" class="._aHide" runat="server" visible="true"><p>My Message</p></div>
aspx server side elements not created when page load if it's visible property = true.
I need to hide this div after 7 seconds of show it, unless mouse over.
I created this code
$(document).ready(function () {
var hide = false;
$("._aHide").hover(function () {
clearTimeout(hide);
});
$("._aHide").mouseout(function () {
hide = setTimeout(function () { $("._aHide").fadeOut("slow") }, 7000);
hide;
});
$("._aHide").ready(function () {
hide = setTimeout(function () { $("._aHide").fadeOut("slow") }, 7000);
hide;
});
});
But somthings wrong here
1- this code work for one time only, And I show this message many times.
2- All message boxes hides in one time, because I can't use $(this) in settimeout and I don't know why.
Thank you for your help, and I really appreciate it
Remove the point in the HTML code:
<div id="Message1" class="_aHide" runat="server" visible="true"><p>My Message</p></div>
See: http://api.jquery.com/class-selector/
tbraun89 is right, remove the "." in your html code.
Then, you can simplify your code like this :
JQuery hover have 2 functions using mouseenter and mouseleave
$(document).ready(function () {
var hide = false;
$("._aHide").hover(
function () {
//Cancel fadeout
clearTimeout(hide);
},
function(){
//re-set up fadeout
clearTimeout(hide);
hide = setTimeout(function () { $("._aHide").fadeOut("slow") }, 7000);
});
//Set up fadeout
hide = setTimeout(function () { $("._aHide").fadeOut("slow") }, 7000);
});
ive got the problem that i dont know how to stop my function with mouseover and restart it with mouseout
first here is my test-code:
<script type="text/javascript">
function fadeEngine(x) {
var total_divs=3; //setze hier die nummer der gewollten divs
var y=x;
if(x==total_divs) y=1; else y++;
$("#fade"+x).css("display","none");
$("#fade"+y).fadeIn("slow");
setTimeout('fadeEngine('+y+')',3000); //modifi alle 3000 miliseconds nen neuen div
}
fadeEngine(0); //Initialisation des Scripts
</script>
<script type="text/javascript">
$(document).ready(function(){
/*
$("#container").hover(function(){
stop('mouse over');
},function(){
alert('mouse out');
});
*/
/*
$("#container").hover(function()
{
$(this).stop().fadeTo("slow", 1.00);
},
function()
{
$(this).stop().fadeTo("fast", 0.50);
});
*/
});
</script>
</head>
<body>
<div id="container" style="width:200px;height:200px;background:#afafaf;color:#red;">
<div id="fade1">Content one</div>
<div id="fade2" style="display:none">Content two</div>
<div id="fade3" style="display:none">Content three</div>
</div>
<div class="blocker"> </div>
</body>
</html>
How i can do this to stop my function fadeEngine if im go over the contentdiv and start it if im move out of the div?
thanks a lot for help
Give all of your #fadeX elements a class (say .faders) and then use:
$('.faders').stop();
Or give the container div an id like #faderbox and say:
$('#faderbox div').stop();
I'm not sure exactly what you want to happen with regards to your fadeIn and fadeOut effects in your fadeEngine, however, I can give you two pieces of advice:
You can use the jQuery effect stop() to stop all current jQuery animations on selected elements. For example:
$("#fade"+y).stop();
Will stop the fading animation for that element in its current state. You can then reset the CSS if you wish.
To stop a function from being called that you previously queued with setTimeout, you must obtain the return value and call clearTimeout(). For example:
var timeout = setTimeout('fadeEngine('+y+')',3000);
// later...
clearTimeout(timeout);
This will clear the pending timeout event and prevent it from occurring.
If it's simply a case of attaching the animation to the mouse over bevahiour etc try this :
$(this).mouseover(function () {
// stops the hide event if we move from the trigger to the popup element
if (hideDelayTimer) clearTimeout(hideDelayTimer);
// don't trigger the animation again if we're being shown, or already visible
if (beingShown || shown) {
return;
} else {
beingShown = true;
// (we're using chaining) now animate
this.animate({
//some animation stuff
}, function() {
// once the animation is complete, set the tracker variables
beingShown = false;
shown = true;
});
}
}).mouseout(function () {
// reset the timer if we get fired again - avoids double animations
if (hideDelayTimer) clearTimeout(hideDelayTimer);
// store the timer so that it can be cleared in the mouseover if required
hideDelayTimer = setTimeout(function () {
hideDelayTimer = null;
this.animate({
//some animation stuff
}, function () {
// once the animate is complete, set the tracker variables
shown = false;
});
}, hideDelay);
});
Try applying the stop behaviour to each element that requires it e.g.
$('.faders').each(function () {
$(this).mouseover(function () {
$(this).stop();
});
});