JQuery анимация не работает

0

Я пытаюсь сделать простой анимационный jQuery, когда вы нажимаете на div, называемый "second_image", весь div "image_holder" (который удерживает second_image) перемещается влево. Я пытаюсь сделать это с помощью команды.animate, но по какой-то причине она не работает.

Ниже представлен мой полный jQuery - вы заметите, что div "second_image" добавляется к существующему div... это то, что вызывает проблему?

$('.gallery').click(function () {
    $('#images_holder').remove();

    $('#overlay').fadeIn().append('<div id="images_holder"><div class="main_image"></div><div class="second_image"></div></div>');
    $main_img_url = $(this).attr('data-first-img-url');
    $second_img_url = $(this).attr('data-second-img-url');

    $('.main_image').css("background-image", "url('" + $main_img_url + "')");
    $('.second_image').css("background-image", "url('" + $second_img_url + "')");
});

$('.second_image').click(function () {
    $('#images_holder').animate({
        left: "+=270px"
    });
});

$(".close_gallery").click(function () {
    $('#overlay').fadeOut();

});
$(document).keyup(function (e) {
    if (e.keyCode == 27) {
        $('#overlay').fadeOut();
    }
});

jSfiddle здесь (нажмите escape, чтобы выйти из всплывающего режима) http://jsfiddle.net/9d9sz/6/

Теги:
click
jquery-animate

3 ответа

0
Лучший ответ

Проблема в том, что вы привязываете событие click к элементу, который еще не существует.

Вы создаете div 'second_image' только тогда, когда вы нажимаете на .gallery, поэтому, когда вы $('.second_image').click запускается $('.second_image').click, нет элемента для привязки клика.

Попробуйте изменить свой код на это:

$('.gallery').click(function () {
  $('#images_holder').remove();

  $('#overlay').fadeIn().append('<div id="images_holder"><div class="main_image"></div><div class="second_image"></div></div>');
  $main_img_url = $(this).attr('data-first-img-url');
  $second_img_url = $(this).attr('data-second-img-url');

  $('.main_image').css("background-image", "url('" + $main_img_url + "')");
  $('.second_image').css("background-image", "url('" + $second_img_url + "')");

  $('.second_image').click(function () {
    $('#images_holder').animate({
      left: "+=270px"
    });
  });
});

$(".close_gallery").click(function () {
  $('#overlay').fadeOut();

});

Таким образом вы привязываете событие click к .second_image после его создания.

Поделиться
  • 0
    Это ужасное предложение. Каждый раз, когда кто-то нажимает на .gallery - слушатель события привязывается к .second_image что может привести к .second_image что несколько слушателей будут ограничены.
  • 0
    @ Adam - согласился - но этот код едва ли использовал «лучшие практики» с самого начала. Я просто ответил, почему щелчок не работал - не полностью переписал их код.
Показать ещё 1 комментарий
2

Почему бы вам просто не использовать 270px:

$('#images_holder').animate({
    left:"270px"
});

Кроме того, вам необходимо использовать делегирование при добавлении события к динамически создаваемому элементу:

$(document).on('click', '.second_image', function () {
    $('#images_holder').animate({
        left: "270px"
    });
});

Обратите внимание, что вам необходимо добавить делегирование и другим событиям в качестве close_gallery.

Пример жизни: http://jsfiddle.net/9d9sz/9/

Поделиться
0

Рабочий ДЕМО

Попробуй это

Добавьте код ниже внутри $('.gallery').click(function() {

$('.second_image').click(function() {
        $('#images_holder').animate({
        left:"270px"
          });
        });

Этот элемент не существует при загрузке страницы, его динамически создается в $('.gallery').click(), поэтому привязка события click работает только после создания элемента

Или

создание события делегирования вместо

Рабочий DEMO2

$(document).on('click','.second_image',function() {
    $('#images_holder').animate({
    left:"270px"
      });
    });
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню