Question

我正在尝试做一个简单的jQuery动画，当你点击一个名为“second_image”的div时，整个“image_holder”div（它包含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 here（按下退出以退出弹出模式）http://jsfiddle.net/9d9sz/6/

Answer 1

为什么不使用270px：

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

此外，在向动态创建的元素添加事件时，需要使用委派：

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

请注意，您还需要将委托添加到close_gallery的其他事件中。

活生生的例子：http://jsfiddle.net/9d9sz/9/

Answer 2

问题是你将click事件绑定到一个尚不存在的元素。

只有在单击.gallery时才创建'second_image'div，所以当你$('.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();

});

这样，您就可以在创建点击事件后将其绑定到.second_image。

Answer 3

正在工作 DEMO

试试这个

在$('.gallery').click(function() {

中添加以下代码

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

此元素在页面加载时不存在，它在$('.gallery').click()上动态创建，因此click事件的绑定仅在创建元素后有效

或

创建一个Delegate事件

正在工作 DEMO2

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

jQuery动画留下不起作用

3 个答案:

正在工作 DEMO

或

正在工作 DEMO2