JQuery скрыть / показать флажок

Question

У меня есть флажок, который, когда после проверки появляется всплывающее окно с сообщением, то, если флажок снят, появляется другой элемент, который всплывает с другим сообщением. Я получил это, чтобы работать прилично, но когда вы нажимаете флажок пару раз подряд, это сбивает с толку, и сообщения не отображаются правильно. Есть идеи, как сделать эту работу лучше? (Я не специалист в отделе jquery, поэтому любая помощь определенно приветствуется). Большое спасибо!

Проверьте!

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);
        }

    });
});

Answer 1

Вам нужно остановить текущую анимацию, вы также должны передать параметры clearQueue и jumpToEnd

$(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);
        }

    });
});

Скрипка здесь: http://jsfiddle.net/thebeebs/LwNHd/8/

Проблема с вашим кодом заключается в том, что jQuery ставит анимации в очередь, и потому что у вас есть 4-секундная анимация: если кнопка нажимается много раз, очередь анимации очень быстро становится длинной.

Подробнее о команде остановки вы можете узнать здесь: http://api.jquery.com/stop/

Answer 2

Мне удалось заставить это работать, немного упростив анимацию ( DEMO )

Я только что изменился

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

до

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

---

Кстати, я думаю, вам следует выяснить разницу между классами и идентификаторами. Классы применяются к группам объектов, а идентификаторы относятся к одному объекту. Взгляните на Эта ссылка , чтобы увидеть правильный способ сделать это. Обратите внимание, как я могу изначально скрывать элементы сообщения с помощью CSS, а не JS.