0

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

4

3 回答 3

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/

于 2013-09-26T09:26:10.787 回答
0

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

只有在单击时才创建“second_image”div .gallery，因此在$('.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创建后。

于 2013-09-26T09:28:51.187 回答
0

工作演示

尝试这个

在里面添加下面的代码 $('.gallery').click(function() {

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

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

或者

而是创建一个委托事件

工作演示2

$(document).on('click','.second_image',function() {
    $('#images_holder').animate({
    left:"270px"
      });
    });
于 2013-09-26T09:34:08.760 回答