I was wondering, how in jquery am I able to hide a div after a few seconds? Like Gmail's messages for example.
I've tried my best but am unable to get it working.
This will hide the div after 1 second (1000 milliseconds).
setTimeout(function() {
$('#mydiv').fadeOut('fast');
}, 1000); // <-- time in milliseconds
#mydiv{
width: 100px;
height: 100px;
background: #000;
color: #fff;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv">myDiv</div>
If you just want to hide without fading, use hide().
You can try the .delay()
$(".formSentMsg").delay(3200).fadeOut(300);
call the div set the delay time in milliseconds and set the property you want to change, in this case I used .fadeOut() so it could be animated, but you can use .hide() as well.
http://api.jquery.com/delay/
jquery offers a variety of methods to hide the div in a timed manner that do not require setting up and later clearing or resetting interval timers or other event handlers. Here are a few examples.
Pure hide, one second delay
// hide in one second
$('#mydiv').delay(1000).hide(0);
Pure hide, no delay
// hide immediately
$('#mydiv').delay(0).hide(0);
Animated hide
// start hide in one second, take 1/2 second for animated hide effect
$('#mydiv').delay(1000).hide(500);
fade out
// start fade out in one second, take 300ms to fade
$('#mydiv').delay(1000).fadeOut(300);
Additionally, the methods can take a queue name or function as a second parameter (depending on method). Documentation for all the calls above and other related calls can be found here:
https://api.jquery.com/category/effects/
There's a really simple way to do this.
The problem is that .delay only effects animations, so what you need to do is make .hide() act like an animation by giving it a duration.
$("#whatever").delay().hide(1);
By giving it a nice short duration, it appears to be instant just like the regular .hide function.
$.fn.delay = function(time, callback){
// Empty function:
jQuery.fx.step.delay = function(){};
// Return meaningless animation, (will be added to queue)
return this.animate({delay:1}, time, callback);
}
From http://james.padolsey.com/javascript/jquery-delay-plugin/
(Allows chaining of methods)
Using the jQuery timer will also allow you to have a name associated with the timers that are attached to the object. So you could attach several timers to an object and stop any one of them.
$("#myid").oneTime(1000, "mytimer1" function() {
$("#something").hide();
}).oneTime(2000, "mytimer2" function() {
$("#somethingelse").show();
});
$("#myid").stopTime("mytimer2");
The eval function (and its relatives, Function, setTimeout, and setInterval) provide access to the JavaScript compiler. This is sometimes necessary, but in most cases it indicates the presence of extremely bad coding. The eval function is the most misused feature of JavaScript.
http://www.jslint.com/lint.html
Probably the easiest way is to use the timers plugin. http://plugins.jquery.com/project/timers and then call something like
$(this).oneTime(1000, function() {
$("#something").hide();
});
<script>
$(function() {
$(".hide-it").hide(7000);
});
</script>
<div id="hide-it">myDiv</div>
we can directly use
$('#selector').delay(5000).fadeOut('slow');
Related
I have to hide some of subsections on click on button , here is the code
$('#myButton').on('click', function (event){
event.preventDefault();
$('#panel').hide();
$('#header').hide();
setTimeout(function(){ $('#sub-section').attr('style','display:none;'); }, 100);
});
at the last statements if I remove function set timeout then display attribute to none is not set on #sub-section . I just came to know about , what is actual need of settimeout here. It should work without settimeout also.
If function hide is taking too much time to execute , I have tried
$('#panel').attr('style','display:none;');
$('#header').attr('style','display:none;');
$('#sub-section').attr('style','display:none;');
also but it is not working. at 3rd statement only.
In this case display: none will be applied to your element after 100 milliseconds. I think this is done because above you have called hide function 2 times and this function will work with animation which will take some time. So your hide function will finish his in approximately less or equal to 100 milliseconds than display: none will be applied
i hope you will find your answer here. and also change the timing value and observe the output then you will understand.
[http://jsfiddle.net/mxgtaLzw/2/]
Without Function :
[http://jsfiddle.net/mxgtaLzw/3/]
How can I make sure that my next image will not come up until my first one has been completely hidden? It is written in Javascript and is a single line code, I wanted to make sure that the next one would not fade in before the last one fades out...since that causes the slider to distort. Here is the code:
$('.carousel_slider a:first-child').fadeOut().hide().next().fadeIn().show().end().appendTo('.carousel_slider');
How can I make sure that my next image will not come up until my first one has been completely hidden?
Here is a working example http://jsfiddle.net/pV57K/.
var $first = $('.carousel_slider a:first-child');
$first.fadeOut(function() {
$first.hide();
var $next = $first.next();
$next.fadeIn(function() {
$next.show();
$first.appendTo('.carousel_slider');
});
});
As per the jQuery docs, provide a callback to fadeOut():
.fadeOut( [duration ] [, complete ] )
If supplied, the callback is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but this is set to the DOM element being animated.
Instead of writing $('thing').fadeOut().next().fadeIn() you should write:
$('thing').fadeOut(function() {
$(this).next().fadeIn()
})
This will ensure that the call to .fadeIn() does not happen until the call to .fadeOut() has completed. Also, .fadeOut() will set display: none once the opacity reaches 0, and .fadeIn() will restore display. This means that you don't actually need your calls to .hide() and .show().
How can I hide the #results after 5 secs ? I tried this but it does not work.
$('#results').hide().html(data).fadeIn('slow').delay(5000).hide();
What I had is this one
$('#results').hide().html(data).fadeIn('slow');
Put a duration on your hide() call and it will work like this:
$('#results').hide().html(data).fadeIn('slow').delay(5000).hide(1);
The issue is that hide() without any parameters is just an immediate operation. It doesn't go through the fx queue so therefore, it doesn't come after the .delay(5000). But, if you give a duration to the function like .hide(1), then it becomes an animation and it goes through the fx queue and thus will come after the .delay(5000).
You can see it work here: http://jsfiddle.net/jfriend00/wzbtU/
From the jQuery doc for hide():
When a duration is provided, .hide() becomes an animation method.
Do you mean something like:
$('#results').hide().html(data).fadeIn('slow');
setTimeout(function() {
$('#results').hide();
}, 5000);
You'd have to use setTimeout.
setTimeout("$('#results').hide().html(data).fadeIn('slow');", 5000);
The reason why .delay(5000) doesn't work is because .hide() isn't included in the animation queue.
The jQuery's fadeOut method is nifty:
$('#results').delay(3000).fadeOut('slow');
I have to imagine that this is a common use case for javascript/jQuery, so forgive me if it's somewhere else on the site, I searched for it and couldn't find this basic use case.
I have a visible div (A). Hovering that div displays some other divs (B & C). Unhovering any of those divs (A, B, or C) will hide the two shown divs (B & C).
Simple enough, right? The problem is that that simple behavior leads to ugliness when you hover and un-hover a number of times in quick succession, since the events all stack and then it just acts like an accordian for a while.
I tried bringing the typewatch function into the equation:
var typewatch = (function(){
var timer = 0;
return function(callback, ms){
clearTimeout (timer);
timer = setTimeout(callback, ms);
}
})();
But I wasn't able to use it correctly, I guess (perhaps I would have to call a single custom toggle function that calls typewatch itself, or something?).
For ease of understanding, here is a jsfiddle of the exact case:
http://jsfiddle.net/tchalvakspam/KG3P9/7/
But speaking in general, how can I catch multiple events and only honor the latest one?
I use e.preventDefault() with jQuery events to stop the event from propagating up the tree.
This is actually something that used to bother me a lot. Before you animate, call $.stop() which will freeze any present animation in its tracks, and pick up with the new goal you give it.
$("#container")
.mouseenter(
function(){
$(".panels", this).stop(true, true).slideDown();
})
.mouseleave(
function(){
$(".panels", this).stop(true, true).slideUp();
}
);
This follows the documentation provided in the jQuery API for the $.stop() method itself as they present a similar example, using a single image.
Demo: http://jsbin.com/adeqef/2/edit
CSS is more or less irrelevant. How do I stop jumping?
jQuery(function() {
jQuery("#showquickfind").mouseover(function() {
jQuery("#quickfind").animate({
height: "show",
opacity: "show"
}, "slow");
return false;
});
jQuery("#quickfind").hover(function() {},
function() {
$("#quickfind").animate({
opacity: 1.0
}, 1125).slideUp(375);
return false;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
show me
<div id="quickfind">
<ul>
<li>test</li>
<li>test2</li>
<li>test3</li>
</ul>
</div>
You may want to look at chaining the jQuery.stop() command before each animate command. It stops all the currently running animations on the specified elements.
i.e.
jQuery("#quickfind").stop().animate({
height:"200px", opacity: 1},"slow");
return false;
Is there a reason you are using jQuery instead of the shorthand $ for the jQuery object? you can use the $ shorthand for the jQuery object, even if using other libraries that use it, by following this pattern-
(function($) {
//Your code here using $ shorthand for jQuery :)
})(jQuery);
This means that $ within the scope of the outer function is a reference for the jQuery object.
I have set up your code on this sample page. If you want to edit it, then add "/edit" to the URL.
Also, Are you sure that "show" is a valid value for height and opacity?
My understanding is that height needs to be set to either auto(i.e. size of containing block), a length or a percentage relative to the containing block, and opacity should be a value between 0 and 1 (jQuery abstracts away differences between browsers and will use whichever opacity attribute is appropriate i.e. opacity or filter:alpha(opacity))
You have the same problem I did. What's happening is that your hover event happens, the quickfind slides up, but then it disappears, so it shows again, etc, etc, etc.
The only way I've found to make it stop jumping is to keep a height set on the container element, so that it always stays that height.
You might want to use the mouseenter event, not mouseover.
The difference is described in the jQuery documentation.
Mouseover fires when the pointer moves into or out from child element, while mouseenter doesn't.
There's also the example how to use it, you have to use the bind() function.
Edit
After all the best solution could be to use hover(), as Russ Cam has mentioned in the comments.
BTW
You're registering the hover-handle multiple times, each time one goes over the "show me"-link.