5 делений, заменяющих друг друга на клике

Question

У меня есть jquery-анимация div, которая заменяет друг друга, она хорошо работает, но при нажатии на черный блок (mydiv1) она не возвращается на свое место, почему?1004 *

<script type="text/javascript">
    $(document).ready(function(){
        $('.nn').click(function(){
            var l = $(this).css('left');

            $(this).animate({
                left: '-=' + l
            }, 1500, "easeOutBounce", function(){
                // callBack
                $("#divmain").css("background-color", $(this).css("background-color"));
            });

            $('.ff').animate({
                left: '+=' + l
            }, 1500, "easeOutBounce", function () {
                // callBack
            });

            var ff = $('.ff');
            ff.removeClass('ff').addClass('nn');

            $(this).removeClass('nn').addClass('ff');
        });
    });
</script>

Answer 1

Похоже, вы никогда не добавляете событие щелчка к myDiv1. При первой загрузке страницы функция $(document).ready(function () устанавливает все функции щелчка классов .nn, но при изменении класса .ff на .nn функция щелчка отсутствует.

Answer 2

Вы используете .bind() (через .click()), который применяется только к элементам, которые соответствуют вашему селектору во время выполнения кода привязки события.Вы хотите использовать .delegate() или .live(), чтобы черный блок был включен в набор соответствующих элементов.

Вот jsfiddle вашего точного кода с .click(, замененным на .live('click',:http://jsfiddle.net/Uv2GE/

Answer 3

Когда документ загружается, черный квадрат имеет класс "ff", а не "nn", поэтому обработчик click никогда не применяется к нему.

Заменить

      $('.nn').click(function () {

с

      $('.nn').live("click",function () {

и все будет работать нормально.