This function should fadeIn the id="Box" when class="display" is clicked if the Box is not animated and has a display value of none Or fadeOut if the #Box had a display value of is not none. What is wrong?
$(document).ready(function() {
$('.display').click(function() {
var currentDisplayValue = $('#Box').css('display');
if (':animated') {
stop()
};
else if (currentDisplayValue == 'none') {
$('#Box').fadeIn("slow");
};
else {
$('#Box').fadeOut("slow");
};
});
Thanks
Try:
$(function() {
$(".display").click(function() {
var box = $("#Box");
if (box.is(":animated")) {
box.stop();
} else if (box.is(":hidden") {
box.fadeIn("slow");
} else {
box.fadeOut("slow");
}
});
});
You've got some syntax errors (eg semi-colons after the curly braces) and stop() needs to be applied to a jquery set. Lastly, don't check the current display CSS value like you're doing. Use the :hidden selector instead.
Related
The following jsFiddle changes text of #more depending on the visibility of #extra:
<style>
#extra{
display: none;
}
</style>
More about us
<div id="extra">Some Text</div>
<script>
$('#more').click(function() {
if ($('#extra').is(':visible')) {
$(this).text('Less about us');
} else {
$(this).text('More about us');
}
$('#extra').slideToggle('fast');
});
</script>
This works fine. However, it does not work anymore if I put the slideToggle() above the if-statement like this (see this jsFiddle):
$('#more').click(function() {
$('#extra').slideToggle('fast');
if ($('#extra').is(':visible')) {
$(this).text('More about us');
} else {
$(this).text('Less about us');
}
});
In this example, the text will remain "More about us" no matter if #extra is hidden or not. Why?
the code get's executed one line at a time, so by the time you enter the if, the slideToggle isn't finished so the element is visible.
You should put the if statement inside the slideToggle's complete callback http://api.jquery.com/slidetoggle/
$('#more').click(function() {
var _this = this;
$('#extra').slideToggle('fast', function() {
if($(this).is(':visible')) {
$(_this).text('Less about us');
}
else {
$(_this).text('More about us');
}
});
});
jsFiddle
This happens because the animation isn't done before you check the visibility. A cleaner solution would be this:
var visible = false;
$('#more').click(function() {
visible = !visible;
if (visible) $('#extra').slideDown();
else $('#extra').slideUp();
$(this).text(visible ? 'Less about us' : 'More about us');
});
Fiddle
This way you don't have to check the actual visibility of the element. You could use a callback to execute the code after the animation has completed, but that could cause an unwanted delay.
I want to do a simple function in Jquery: when a button is clicked show the input text, when it's clicked again- hide the input text.
<div>
<div id="btnNewGroup">New Group</div>
<input type="text" id="newGroup" style="display:none" />
</div>
and this is the scrupt section:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").hide()) {
$("#newGroup").show();
}
else {
$("#newGroup").hide()
}
});
});
when I click the button the text input is showing, when I click it again I want the input text to be hidden, but nothing happens.
You can use toggle() to show / hide
Live Demo
$("#btnNewGroup").click(function () {
$("#newGroup").toggle();
});
The problem with the condition you have is that you are hiding the element instead of checking if it is hidden. You can is with :hidden like is(':hidden') to check if element is hidden.
if ($("#newGroup").is(':hidden')) {
$("#newGroup").show();
else
$("#newGroup").hide();
if ($("#newGroup").hide())
The hide function does not return a boolean value so you can't use it in an if statement. It returns a jQuery object which is always true so your second block never gets hit.
You can try two things:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").is(":visible")) {
$("#newGroup").hide();
}
else {
$("#newGroup").show()
}
});
});
Or a simple toggle:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
$("#newGroup").toggle();
});
});
Additionally, when working with selectors multiple times it's a good idea to cache the element - otherwise jQuery tries to find the element each time you try:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
var $newGroup = $("#newGroup"); // Cache it here
if ($newGroup.is(":visible")) {
$newGroup.hide();
}
else {
$newGroup.show()
}
});
});
use .toggle() for hide and show alternatively in jquery
$("#btnNewGroup").click(function () {
$("#newGroup").toggle();
});
Demo
Use .toggle() function
$("#btnNewGroup").click(function () {
$("#newGroup").toggle()
});
Or use :visible pseudo selector with is()
Demo
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").is(":visible")) {
$("#newGroup").hide();
}
else {
$("#newGroup").show()
}
});
});
Note :hide() function does not return boolean value. Use is(:visible) or is(:hidden)
You need to change
if ($("#newGroup").hide()) {
to (just one possible solution)
if ($("#newGroup").css('display')=='none') {
Because $("#newGroup").hide() will always return true.
And here are the full code:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").css('display')=='none') {
$("#newGroup").show();
}
else {
$("#newGroup").hide()
}
});
});
Have a look at the .toggle() function within the API.
http://api.jquery.com/toggle/
document.getElementById("username").style.display='block';
QUESTION
How can I prevent a jquery toggle function from running before the previous toggle animation is complete?
I have a simple script to show or hide data depending whether a checkbox is checked.
JQUERY
$('.a').hide();
$('#CB').change(function () {
if ($(this).is(':checked')) {
$('.b').fadeOut(100, function () {
$('.a').fadeIn();
});
} else {
$('.a').fadeOut(100, function () {
$('.b').fadeIn();
});
}
});
PROBLEM
When the event is fired consecutively both elements, in this case .a and .b become visible together. I assume this is because the previous request is not completed prior to firing the function again.
CLICK FOR DEMO
http://jsfiddle.net/keypaul/PbS33/5/
$('.a').hide();
$('#CB').change(function () {
if ($(this).is(":checked")) {
$('.b').stop().fadeOut(100, function () {
$('.a').stop().fadeIn();
});
} else {
$('.a').stop().fadeOut(100, function () {
$('.b').stop().fadeIn();
});
}
});
Using jquery stop()
http://api.jquery.com/stop/
You're right. Animations in jQuery work asynchronously so they could sometimes run at the same time.
To answer your question, I think you already answered it in your question title.
Use a queue.
Set up a flag, name it something like isFading, and when it's true when $("#CB") changes, you queue it instead.
var isFading=false;
var animationQueue = [];
$('#CB').change(function () {
if(isFading){
if ($(this).is(':checked')) {
animationQueue.push(fadeOutFadeIn);
}
else {
animationQueue.push(fadeInFadeOut);
}
}
else{
if ($(this).is(':checked')) {
fadeOutFadeIn();
} else {
fadeInFadeOut();
}
}
);
function fadeOutFadeIn(){
isFading=true;
//insert your fadeout fadein code here
isFading=false;
if(animationQueue.length > 0)
//you're now calling the queued animation to go through
animationQueue.splice(0,1)();
}
function fadeInFadeOut(){
isFading=true;
//insert your fadein fadeout code here
isFading=false;
if(animationQueue.length > 0)
//you're now calling the queued animation to go through
animationQueue.splice(0,1)();
}
I have this code for hiding\showing link depends on state of cBoxoverlay. But when i click to close this item(display:none), and then click again to show it(display:block) my link(#close-news) still not showing.
jQuery(document).click(function () {
if (jQuery("#cBoxOverlay").css("display", "none")) {
jQuery("#close-news").css("display", "none");
} else if (jQuery("#cBoxOverlay").css("display", "block")) {
jQuery("#close-news").css("display", "block");
Where did i make mistake?
try this - no need for if statements. You can just set the #close-news to whatever #cBoxOverLay is
$(document).click(function () {
$("#close-news").css("display", $("#cBoxOverlay").css('display'));
}
Use classes, does a cleaner job.
In case you don't want to use classes, try to use jQuery's toggle, which does basically exactly what you try to achieve: http://api.jquery.com/toggle/
Use is(":visible") to check if the element is visible, and then either show or hide...
jQuery(document).click(function () {
if (jQuery("#cBoxOverlay").is(":visible")) {
jQuery("#close-news").hide();
} else {
jQuery("#close-news").show();
}
});
You can try:
if ($("#cBoxOverlay").css("display") == "none") {
// ...
}
however you can use is method:
if ( $("#cBoxOverlay").is(':hidden')) {
// ...
}
$(document).click(function(){
if ($("#cBoxOverlay").is(":hidden")) { // if #cBoxOverlay is hidden
$("#close-news").hide() // hide the #close-news
} else if ($("#cBoxOverlay").is(":visible")) { // if #cBoxOverlay is visible
$("#close-news").show() // // show the #close-news
}
})
you can remove the the second condition and use else instead as when element is not hidden it is visible, of course.
Try this, based on #Raminson's answer:
$(document).click(function () {
if ($("#cBoxOverlay").is(':hidden')) {
$("#close-news").css("display", "none");
} else{
$("#close-news").css("display", "block");
May be give a try on this one, too:
$(document).click(function(){
$('#close-news').css('display', function(){return $('#cBoxOverlay').css('display');});
});
I'm puzzled about getting a simple toggle to work that should be fairly simple. I want the div to fade out when the opacity is 100 and fade in when it is 0. http://jsfiddle.net/mGdcm/8/
Javascript-
$('#toggleButton').click(function() {
if ($('#toggleSection').css("opacity") === 0) {
$('#toggleSection').fadeIn("slow");
}
else {
$('#toggleSection').fadeOut("slow");
}
return false;
});
HTML-
toggle
<div id="toggleSection" style="opacity:0;"> <p>Why isn't this working?</p></div>
You can just use the jQuery fadeToggle function.
$('#toggleButton').click(function() {
$("#toggleSection").fadeToggle("slow");
});
http://jsfiddle.net/mGdcm/16/
You need to set jQuery in your fiddle, not MooTools. :)
Also for fading back in, check that the css display property is equal to "none".
Fixed version for you at http://jsfiddle.net/mGdcm/14/.
You need to use jQuery, and the correct code using visible selector:
$('#toggleButton').click(function() {
if ($('#toggleSection:visible').length < 1) {
$('#toggleSection').fadeIn("slow");
}
else {
$('#toggleSection').fadeOut("slow");
}
return false;
});
Example
Example starting with not visible
Not a very good solution but it works :)
$('#toggleButton').click(function() {
console.log($('#toggleSection').css("opacity"));
if ($('#toggleSection').css("opacity") == 0) {
$('#toggleSection').fadeIn("slow", function(){
$('#toggleSection').css("opacity", 1);
});
}
else {
$('#toggleSection').fadeOut("slow", function(){
$('#toggleSection').css("opacity", 0);
});
}
return false;
});