javascript - jQuery:仅对当前 div 进行动画处理

Question

如何才能仅对当前 div 内的元素进行动画处理？如果用户单击“编辑”，它应该仅对当前单击的部分进行动画处理，而不是对所有 div 进行动画处理。

$('.js-edit').click(function() {
  if ($('.other,.hide-content, .show-content').is(':animated')) return;
  // Hide 'Edit link'
  $(this).fadeOut(200);

  // Push down 'other' div
  $('.other').animate({
    'marginTop': "+=400px" //moves down
  });

  // Hide content
  $('.hide-content').delay(200).fadeOut(200);

  // Show hidden content
  $('.show-content').delay(400).fadeIn(200);
});

$(".js-cancel").click(function() {
  if ($('.other,.hide-content, .show-content').is(':animated')) return;
  $('.js-edit').delay(200).fadeIn(200);
  $('.other').delay(200).animate({
    'marginTop': "-=400px" //moves up
  });
  // Show content
  $('.hide-content').delay(200).fadeIn(200);

  // Hide shown content
  $('.show-content').fadeOut(200);
});

jsFiddle

Answer 1

你需要使用

$(this).closest('.section').find

例如 $('.hide-content')

$(this).closest('.section').find('.hide-content').....