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/]
Related
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().
I am a genuine javascript novice and looking some pointers in my learning - not homework nor is it anything commercial.
I have a function here which shows an element which is hidden due to the first 2 lines of the function. I start by clicking the heading and the 2 hidden divs appear, which is exactly what I wanted to happen. However, now when I use this second function, it won't return to it's windown onload state. Why is this? Is there a better way to achieve this?
1st Function
$(window).ready(function(){
$('.miniC').css("display", "none");
$('.miniI').css("display", "none");
$(".heading").click(function(){
$('.miniC').slideDown();
$('.miniI').slideDown();
$('.miniC').show();
$('.miniI').show();
});
});
2nd Function (Reverse)
$(window).ready(function(){
$(".hideOut").click(function(){
$('.miniC').slideUp();
$('.miniI').slideUp();
$('.miniC').hide();
$('.miniI').hide();
});
});
Thanks in advance and any reference to good reading material is appreciated.
* Corrected Missing closing quote - this was a mistake of me typing it into Stack Overflow - Sorry! *
It seems like you want to toggle the visibility of an element, and since you're already sliding it, why not just use slideToggle:
$(".miniC").css("display", "none");
$(".miniI").css("display", "none");
$(".heading").click(function () {
$(".miniC").slideToggle();
$(".miniI").slideToggle();
});
Example
You shouldn't need to call .hide() and .show() - they will be dealt with as part of the slide functions. However, you're calling them immediately after the slide, but that takes a while to complete (400ms by default) meaning that .hide() fires before .slideUp() completes.
Outside the question scope, but still applicable.
$('.miniC').css("display", "none");
$('.miniI').css("display", "none");
This part of the page functionality should probably in CSS, which will result in the browser rendering the initial paint of the page correctly. In your case the browser paints the "miniC" and "miniI" elements, then your jQuery code updates the CSS display property to "none" for both individually. Triggering two additional repaints of the page. So, basically with the jQuery code you are drawing the page three times for an effect that could achieved with a single paint.
Then like Charlie said add a listener for the click.
$(".heading").click(function () {
$(".miniC").slideToggle();
$(".miniI").slideToggle();
});
Because slideUp() and hide() are written inside the click event. So, it wont fire on window ready, but only onclick of $(".hideOut").
There is a typo in your first function.
a single quote is missing in the line:
$('.miniC).show();
I create this function for show div with function call , but i nedd execute this function and stop in one second after show :
<script>
function repit_clouds(request)
{
if (request=='no')
{
stop();
}
else
{
if (request=='ok')
{
var interval = setInterval(function() {
$("#header_sun").fadeIn(4000);
$("#header_sun").fadeOut(4000);
},10000);
}
}
}
$(document).ready(function()
{
$("#header_sun").fadeIn(4000).delay(4000).fadeOut(4000);
repit_clouds('ok');
$("#header_background_clouds").fadeOut(2000).css("display","#none");
$("#header_background_night").fadeIn(2000).css("background","#000").show(4000).fadeIn(2500);
repit_clouds('no');
});
</script>
The problem it´s with repit_clouds function , when i send the value no the function must stop , but no works fine and continue as if the request==ok , i don´t know why no stop
umm, what exactly do you think stop() does? Did you perhaps mean:
$('#header_sun').stop()
which would pause any existing animations on that element?
Or did you perhaps also want to stop the interval timer:
clearInterval(interval);
which of course also requires that interval be declared outside of the function so that its value isn't lost each time you call the function.
I note also that your .css() functions won't be queued by the .fadeOut() or .show() calls - .css() isn't an animation function so those changes will always happen immediately.
Likewise the two calls to repit_clouds() won't be queued either - if you expect those to be done after the previous animations then you need to investigate the jQuery .queue() function, or trigger them during "animation complete callbacks".
When I submit my form, the last function I have is:
$("#message").show().delay(5000).fadeOut();
This will show my thank you message for 5 seconds, and then fade the "message" div out.
I then tried adding this function below it:
$("#slide_panel").slideToggle("slow");
because I want the form (which is inside the #slide_panel div) to close / slide up AFTER the 5 second delay.... but when I add this function, its almost like the 5 second delay doesn't exist and the success message shows for about half a second and then the whole contact form dissapears as its supposed to.
What is wrong with my code?
$("#message").show().delay(5000).fadeOut();
$("#slide_panel").slideToggle("slow");
delay function applies only to animation queue. you can use the following code by passing a call back function to fadeOut()
$("#message").show().delay(5000).fadeOut('fast', function(){
$("#slide_panel").slideToggle("slow");
});
Now the slideToggle will run once the animation is completed.
You can update the code to the following ...
$("#message").show().delay(5000).fadeOut(function(){
$("#slide_panel").slideToggle("slow");
});
That is, add the slideToggle of SlidePanel in the message callback. For more ideas, check http://jsfiddle.net/sf2Nr/1/
This has to do with the asynchronous behavior of the animation functions in jQuery.
In order to activate the slideToggle after the fadeOut delay, you must call it from the fadeOut's callback function, i.e.:
$("#message").show().delay(5000).fadeOut(0, function() {
$("#slide_panel").slideToggle("slow");
});
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');