I have an element that when clicked is either visible or hidden using jQuery's toggle() method.
Using toggle() is it possible to delay it from being hidden for a few seconds, while not delaying the visibility?
$('.myelement').click(function() {
$('.myelement').toggle();
});
Just try with:
$('.myelement').click(function() {
if ($(this).is(':visible')) {
$(this).delay(1000).hide();
} else {
$(this).show();
}
});
Or simplier:
$('.myelement').click(function() {
$(this).delay($(this).is(':visible') ? 1000 : 0).toggle();
});
Related
how can I in jQuery toggle element on faster than toggle this element off in miliseconds?
There is my code:
jQuery(document).ready(function() {
$('.enmenu').on('click', function(){
$('.ensettings').fadeToggle();
return false;
});
$('html, body').on('click',function(){
$('.ensettings').hide();
});
$(".ensettings").click(function(e){
e.stopPropagation();
});
});
/* Dropdown menu - End */```
You can use fadeToggle conditionally to set the speed of the toggle.
$('.enmenu').on('click', function() {
var el = $('.ensettings');
el.fadeToggle(el.is(":hidden") ? 200 : 5000);
});
Instead of using fadeToggle, simply use hide or show with the duration parameter set. To know if an element is hidden or not, use is(":hidden"):
$('.enmenu').on('click', function(){
var $elem = $('.ensettings');
if($elem.is(":hidden")) { // if element is hidden
$elem.show(200); // show with 200 miliseconds animation
} else { // otherwise
$elem.hide(5000); // hide with 5000 miliseconds animation
}
return false;
});
I'm working on a simple landing page. I have a jquery file but i dont really know how to hide the fade. I mean i just want to animate the 5 image without fade. What do u think where is the probelm ?
http://yourjavascript.com/13873144111/jquery.js - jquery
$(document).ready(function() {
$(".start").click(function() {
$.when($('.start2').fadeIn(2000)).done(function() {
$.when($('.start3').fadeIn(2000)).done(function() {
$.when($('.start4').fadeIn(2000)).done(function() {
$.when($('.start5').fadeIn(3000)).done(function() {
$(".start").hide();
setTimeout(function()
{
$(".start").fadeIn(2000);
$(".start2, .start3, .start4, .start5").hide();
}, 3000);
});
});
});
});
});
});
Well, there's something you don't understand, you're actually using the fadeIn animation, so to 'Hide' it, like you asked you have to actually not use it. If you want the stuffs to appear with no fading, you can either use slideDown, your own .animate to create custom animation or show instead of fadeIn.
So to simply use slideDown, you would do this.
<script type="text/javascript">
$(document).ready(function()
{
$(".start").click(function()
{
$.when($('.start2').slideDown(2000)).done(function() {
$.when($('.start3').slideDown(2000)).done(function() {
$.when($('.start4').slideDown(2000)).done(function() {
$.when($('.start5').slideDown(3000)).done(function() {
$(".start").hide();
setTimeout(function()
{
$(".start").slideDown(2000);
$(".start2, .start3, .start4, .start5").hide();
}, 3000);
});
});
});
});
});
});
</script>
And maybe use slideUp instead of hide
I've built a dropdown menu that uses a slideUp event if the menu itself or anywhere in the body is clicked:
$('html, .currentPage').click(function() {
$('.currentMenu').slideUp('fast', function() { myFunction(); });
});
I also have a function inside the slideUp event callback.
However, my problem is that the function is being called on html or .currentPage click whether the slideUp event has occurred or not.
How can I make it so the function(); ONLY happens if the slideUp event runs?
$('html, .currentPage').click(function() {
var $currentMenu = $('.currentMenu');
if($currentMenu.is(':visible')) {
$currentMenu.slideUp('fast', function() { myFunction(); });
}
});
even more
$('html, .currentPage').click(function() {
var $currentMenu = $('.currentMenu');
if($currentMenu.is(':visible')) {
$currentMenu.slideUp('fast', myFunction);
}
});
You can also optionally use $currentMenu.css('display') != 'none' instead of $currentMenu.is(':visible').
The options are suggested based on the actual behaviour of slideUp(), described in the official documentation at http://api.jquery.com/slideUp/.
$('.currentMenu').slideToggle('fast', function() { myFunction(); });
You could add class open to your menu and slideUp() if hasClass('open'):
if ( $menu.hasClass('open') ) {
$menu.slideUp('fast', function(){ });
...
}
I am trying to fade each element in a div to fadeIn (in) succession. I know how to fade in the whole block but not each individual div.
http://jsfiddle.net/reggi/Km55n/
$('#button').click(function() {
setTimeout(function() {
$('#divWithDivs').fadeIn(500);
}, 300);
});
You need to fade the next div in the completion callback of the previous one.
For example:
function fadeAll(elems) {
elems.filter(':hidden:first').fadeIn(1000, function() { fadeAll(elems); });
}
fadeAll($('#parent div'));
Demo
Note that you'll need to hide the children, not the parent.
You could do something like this:
$('#button').click(function() {
var show_next = function(elem) {
if (elem.length) {
elem.fadeIn(300, function () {
show_next(elem.next());
});
}
};
show_next($('div#divWithDivs').children().first());
});
$('#divWithDivs').children().first().fadeIn(500, function() {
$(this).next().fadeIn(500, arguments.callee);
});
Here the demo based on your: http://jsfiddle.net/Km55n/2/
Using toogle to show/hide the div, I've got a problem that when I hide my div with anothor function, I have to click twice on the button to perform correct action.
Is there any way change the toggle switch like I clicked the button?
$('#add_task').toggle(function() {
if ($("#new_task_status").attr("value")==0) {
$("#new_task").slideDown();
$("#new_task_status").attr("value", "1");
}
}, function() {
if ($("#new_task_status").attr("value")==1) {
$("#new_task").slideUp();
$("#new_task_status").attr("value", "0");
}
});
$('nav').click(function() {
if ($("#new_task_status").attr("value")==1) {
$("#new_task_status").attr("value", "0");
$("#new_task").slideUp();
}
});
You could change your .toggle() so it doesn't matter, like this:
$('#add_task').click(function() {
$("#new_task").slideToggle(function() {
$("#new_task_status").val($(this).is(':visible') ? 1 : 0);
});
});
This does a slideToggle() instead, so the current state doesn't matter...when it finishes sliding, if it's shown (you opened it) you get a 1 in the input, otherwise you get a 0. Also, use .val() for input setting, much easier and more universal (I'm assuming it's an input here since that's most likely).
No, you would have to implement your own alternative to the toggle() function, which checks the current state of the element.
I don't see any need to use toogle at all. You can do the same with just a click handler:
$('#add_task').click(function() {
if ($("#new_task_status").attr("value")==0) {
$("#new_task").slideDown();
$("#new_task_status").attr("value", "1");
} else {
$("#new_task").slideUp();
$("#new_task_status").attr("value", "0");
}
});
and then:
$('nav').click(function() {
$('#add_task').click();
});
Btw. nav is not a HTML element. You probably mean #nav (maybe just a typo).
And as Nick already mentioned, consider to use .val().
I suggest an event-driven approch, like:
$("#add_task").bind({
"toggle": function(e) {
$("#add_task").trigger(($("#new_task_status").attr("value")==0) ? "open" : "close"););
},
"open": function(e) {
$("#new_task_status").attr("value", "1");
$("#new_task").slideDown();
},
"close": function(e) {
$("#new_task_status").attr("value", "0");
$("#new_task").slideUp();
}
});
$("#nav").click(function() {
$("#add_task").trigger("toggle");
});