Develop Reference

jquery delay doesn't count as animation

I'm trying to do an animation after button click using promises. But no matter what I do, it will still let me keep clicking.
I'm showing some Bootstrap form validator classes and then removing them. Like this:
messageEffect : function(container) {
return container.fadeIn(100).delay(1000).fadeOut();
},
$.when(this.messageEffect($container)).done(function() {
$container.empty();
$icon.remove();
$group.removeClass('has-feedback has-' + alertType);
});
I'm calling this function called "showAlert()" after some stuff, if something fails, I show the error message below the input field.
Thing is, if I keep clicking and clicking, it will spam the message spans, until they disappear (of course) due to the animation.
I tried using the ('div-that-is-animating').is(':animated') but didn't work, I can still spam them.
I also tried doing an unbind of toggle and click before calling this "showAlert()" function, but didn't work either.
Is it because delay(1000) there isn't counting like an animation? Or what else I can try?
Thanks in advance.

See if this works (assuming your button id is myButton):
messageEffect : function(container) {
$('#myButton').attr('disabled', true);
return container.fadeIn(100).delay(1000).fadeOut();
},
$.when(this.messageEffect($container)).done(function() {
$('#myButton').attr('disabled', false);
$container.empty();
$icon.remove();
$group.removeClass('has-feedback has-' + alertType);
});

Button that displays and hides a sliding menu

I'm trying to build a header with a menu button that triggers a sliding menu. I can make the menu appear when I press the button, but I also want it to dissappear when I click the button again.
This is the event that triggers when the button is clicked.
$('#nav-button').click(function () {
$("#slidermenu").animate({right: "0px"}, 200);
$("body").animate({right: "300px"}, 200);
});
I looked up the animate method and saw that it has a function called done, which takes two parameters. A promise and a boolean. So I figured I can use a if-statement to check if the animation is done, and if the animation is done, the button would send the slidermenu back.
But how can I test if animate().done() is true? Or is there a more simple way of achiveing this?
Here is my fiddle.

.is(':animated') will return true if it's currently being animated.
In the context of what you're trying to do:
if(!$('#slidermenu').is(':animated'))
{
// Animation has finished
}
As an aside:
I try and do this with CSS only now where possible. If you use jQuery toggleClass and predefine the right attributes in your CSS for the toggled classes, you can add a CSS transition to deal with the animation. Just thought it was worth mentioning (this does come with it's own compatibility issues).

Like DeeMac said, it may be better to do this with css transition instead of jQuery animate. But just to add an option, I'll try to show you how to get this to work with jQuery animation also.
First of all, instead of inspecting if the animation is still running or not, you can just stop the ongoing animation before starting another. It will make the button to respond immediately to the users clicks.
For finding out if the menu is open or not, you can use toggleClass. This way you can just use hasClass to determine in which direction you need to animate the menu.
So, this what I came up with:
$('#nav-button').click(function () {
$("#slidermenu").stop();
animateToPosition = "0px";
if ($("#slidermenu").hasClass("open")) {
animateToPosition = "-300px";
}
$("#slidermenu").toggleClass("open");
$("#slidermenu").animate({
right: animateToPosition
}, 200);
});
I made a Demo. If you are going with the css solution, it's fine. Maybe this will help someone else in the future.

Rebind .toggle() event after unrelated event?

I have a filter for a grid that is being shown/hidden with toggle like so:
$("#btnFilter").toggle(function () {
// show filter
}, function () {
// hide filter
});
The grid is interactive and double-clicking it will overlay the existing grid with new dynamic HTML. I do not want my filter to be shown when interacting with the grid, so in my grids onClick() event I am putting the appropriate // hide filter code which is the same as in the toggle function.
The only issue is, since I am bypassing the .toggle() event, I'll need to click on #btnFilter twice when attempting to hide it manually (which is what I do not want).
Any thoughts would be great!
I appreciate the answers but the logic isn't really what concerns me, any idea why toggle has been removed? Possibly related to my issue?

Toggle is removed you can use a boolean variable or just ask jQuery if it's visible
$('#btnFilter').on('click', function () {
if ($("#filterDiv").is(":visible")) {
$("#filterDiv").hide();
} else {
$("#filterDiv").show();
}
});

toggle(function,function...) is removed, create a bool and use an if statement
var toggle = false;
$('#btnFilter').on('click', function () {
toggle = !toggle;
if (toggle) {} else {}
});
toggle(function,function...) remove because:
This is the "click an element to run the specified functions"
signature of .toggle(). It should not be confused with the "change the
visibility of an element" of .toggle() which is not deprecated. The
former is being removed to reduce confusion and improve the potential
for modularity in the library. The jQuery Migrate plugin can be used
to restore the functionality.

jQuery toggle() function not working

This question may be asked before. But I cant find the error. Here this is from the video tutorial of new boston.
$(document).ready(function(){
$('#btn').toggle(function(){
$('#msg').html('yes');
},function(){
$('#msg').html('No');
});
});
The video showing that when click first the div text is yes and next time it show no
But when I try, when the page loads, the button fadeout and div show no. Why? There may be other methods to achieve this functionality. But why this dont work. He showing the syntax of toggle as
$('#btn').toggle(function(){code},function{code});

http://api.jquery.com/category/deprecated/
Note: This method signature was deprecated in jQuery 1.8 and removed
in jQuery 1.9. jQuery also provides an animation method named
.toggle() that toggles the visibility of elements. Whether the
animation or the event method is fired depends on the set of arguments
passed.
http://api.jquery.com/toggle-event/
Updated after OP's comment
DEMO
if you want to make this code work in any version of jQuery
$(document).ready(function () {
var arr = ['yes', 'no'],
i = 0;
$('#btn').click(function () {
$('#msg').html(arr[i++ % 2]);
});
});
DEMO
if you want to make use of toggle-event like functionality in future
use .one()
$(document).ready(function () {
function handle1() {
$('#msg').html('yes');
$('#btn').one('click', handle2);
}
function handle2() {
$('#msg').html('no');
$('#btn').one('click', handle1);
}
$('#btn').one('click', handle1);
});
or
Toggle was removed in version 1.9, so you cannot use it - if you want this logic can be manually implemented or you can make use of the migration plugin
to include the migration plugin, after the inclusion of jQuery library add
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>

livejquery is not working

I am using livequery for applying jquery chosen plugin (for adding tags) on dynamically added elements. I tried :
$(".chz").livequery(function () {
$(this).chosen();
});
Through above code, choose plugin is not applying. But if i tried this :
$(".chz").livequery('click', function () {
$(this).chosen();
});
Than it works properly. But in my case i can`t use click event because until user click over the element the plugin is not applied. What i am doing working in first case ?

try something like this
$("body").on('click', '.chz'function () {
$(this).chosen();
});

when we use chosen plugin then we set class like this
class ="chzn-select"
then
$(function() {
$("chzn-select").chosen();
});
i think this will help you