jQuery动画左不工作答案

【问题标题】：jQuery animate left not workingjQuery动画左不工作
【发布时间】：2013-10-02 04:31:52
【问题描述】：

我正在尝试做一个简单的 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（按escape退出弹出模式）http://jsfiddle.net/9d9sz/6/

【问题讨论】：

您希望图像在每次新点击时继续向左移动吗？

标签： jquery click jquery-animate

【解决方案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/

【讨论】：

【解决方案2】：

问题是您将点击事件绑定到尚不存在的元素。

只有在点击.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。

【讨论】：

这是一个糟糕的建议。每次有人点击.gallery - 一个事件监听器被绑定到.second_image，这可能导致多个监听器被绑定。
@Adam - 同意 - 但这段代码从一开始就几乎没有使用“最佳实践”。我只是回答了为什么点击不起作用 - 没有完全重写他们的代码。
是的，这不是最好的方法……除此之外，如果你一直点击second_image，它会一直向左移动，我相信这不是他想要的。

【解决方案3】：

工作DEMO

试试这个

在$('.gallery').click(function() {内添加以下代码

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

该元素在页面加载时不存在，它是在$('.gallery').click()上动态创建的，所以点击事件的绑定只有在元素创建后才有效

或者

改为创建一个委托事件

工作DEMO2

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

【讨论】：