0

「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 はこちら (Esc キーを押してポップアップ モードを終了します) 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

ワーキングデモ

これを試して

以下のコードを $('.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 に答える
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 に答える