jQuery hide/show checkbox message

Question

I have a checkbox that when upon checking a div pops up with a message then if the checkbox is unchecked there is another div that pops up with another message. I got this to work decently but when you click the checkbox a couple of times in a row it gets confused and the messages aren't displayed correctly. Any ideas how to make this work better? (I am a noOb in the jquery department so any help is definitely appreciated). Thanks so much!

Check it out!

HTML:

<input type="checkbox" name="chkWishList" id="chkWishList" />Checkbox Label<br />
<div class="message1"><span>Success<small></small></span></div>
<div class="message2"><span>Removed<small></small></span></div>

jQuery:

$(function() {
    $(".message1").css("display", "none");
    $(".message2").css("display", "none");
    $("#chkWishList").click(function() {
        if (this.checked) {
            $(".message1").fadeIn("fast").fadeOut(4000);
            $(".message2").hide();
        }
        else {
            $(".message1").hide();
            $(".message2").fadeIn("fast").fadeOut(4000);
        }

    });
});

Can we see your code? Its much easier to help you improve on it without having to guess what your code is. — Becuzz, May 03 '11 at 19:52

Dutchie432 · Answer 1 · 2011-05-03T20:04:15.010

I was able to get this to work by simplifying the animations a bit (DEMO)

I just changed

    if (this.checked) {
        $(".message1").fadeIn("fast").fadeOut(4000);
        $(".message2").hide();
    } else {
        $(".message1").hide();
        $(".message2").fadeIn("fast").fadeOut(4000);
    }

to

    if (this.checked) {
        $(".message1").stop().show().fadeOut(4000);
        $(".message2").stop().hide();
    } else {
        $(".message1").stop().hide();
        $(".message2").stop().show().fadeOut(4000);
    }

On a side note, I think you should clear up the difference between classes and ids. Classes apply to groups of objects, and IDs refer to a single object. Have a look at This Link to see the correct way of doing it. Notice how I can initially hide the message items via CSS and not JS.

Thanks Dutchie, I can't believe I didn't think to initially hide the message through css instead of jquery. I did notice that if you let the message fade a bit then click the checkbox, upon recheck the message is still in the process of fading — MorningStar, May 03 '11 at 20:50

score 2 · Accepted Answer · answered May 03 '11 at 20:19

You need to stop the current animations, you should also pass in the clearQueue and jumpToEnd parameters

$(function() {
    $(".message1").css("display", "none");
    $(".message2").css("display", "none");
    $("#chkWishList").click(function() {
        if (this.checked) {
            $(".message1").stop(true,true).fadeIn("fast").fadeOut(4000);
            $(".message2").hide();
        }
        else {
            $(".message1").stop(true,true).hide();
            $(".message2").stop(true,true).fadeIn("fast").fadeOut(4000);
        }

    });
});

Fiddle here: http://jsfiddle.net/thebeebs/LwNHd/8/

The issue with your code is that jQuery is queuing the animations and because you have a 4 second animation: if the button is pressed numerous times the animation queue gets long very quickly.

You can learn more about the stop command here: http://api.jquery.com/stop/

jQuery hide/show checkbox message

2 Answers2