Jquery CSS转换不起作用

我正在使用jQuery添加一个类，当用户单击缩略图以使用margin top属性提供动画效果时，它似乎不起作用，我不知道为什么，所以我想知道有人可以向我解释一下。代码如下：

CSS:

JS:

我已经在“.lightbox”类上使用了不透明度属性完成了相同类型的动画，它工作得很好，但我不确定为什么页边空白顶部的动画不能工作

---

该站点的url是

我在这里可能错了，但我觉得问题与您正在添加类

有关。img在您实际显示灯箱之前正在向图像显示

。

我在这里可能错了，但是我觉得这个问题与您正在添加类

有关。在您实际显示灯箱之前，img正在向图像显示
。
如lagboy的回答中所述，由于灯箱是隐藏的，因此添加
。在显示灯箱之前，img显示的
不会明显影响任何定位属性。因此，没有动画

此外，如果希望动画在随后的单击中显示，则需要删除
。当图像被取消时，img将显示

这使它工作得更好：

它肯定还需要一些工作，但至少你正在过渡

还有一些额外的调整：


继续绑定重复的
。lightbox
使用
removeClass
处理程序单击事件。考虑在触发或绑定到<代码>的正文之外，通过解除绑定来清除它们。Labbox触发器 <代码>点击< /Cord>处理程序。在这样的规模下它不会杀死你，但它很凌乱，可能会引起麻烦

考虑在事件处理程序外部缓存更常用的选择器（例如，
$（“.lightbox”）
），以提高性能。同样，规模小，但习惯好
如lagboy的回答中所述，由于灯箱是隐藏的，因此在灯箱显示之前添加
。img显示的
不会明显影响任何定位属性。因此，没有动画

此外，如果希望动画在随后的单击中显示，则需要删除
。当图像被取消时，img将显示

这使它工作得更好：

它肯定还需要一些工作，但至少你正在过渡

还有一些额外的调整：


继续绑定重复的
。lightbox
使用
removeClass
处理程序单击事件。考虑在触发或绑定到<代码>的正文之外，通过解除绑定来清除它们。Labbox触发器 <代码>点击< /Cord>处理程序。在这样的规模下它不会杀死你，但它很凌乱，可能会引起麻烦

考虑在事件处理程序外部缓存更常用的选择器（例如，
$（“.lightbox”）
），以提高性能。同样，规模小，但习惯好
是的，这似乎就是问题所在。你将如何解决这个问题？js？Cole答案中的if函数似乎在很大程度上解决了这个问题！一定要检查。是的，这可能是问题所在。你将如何解决这个问题？js？Cole答案中的if函数似乎在很大程度上解决了这个问题！一定要检查，谢谢，科尔！工作完美，我已经了解了问题所在，您提出了未来的改进建议，完美地回答了我的问题，我真的很感激！我想实现您建议的调整，但是，我对jquery/JS非常陌生，所以我不理解您所说的“绑定duplicate.lightbox click事件”和“考虑缓存您更常用的选择器”是什么意思-您可以进一步向我解释一下吗。再次感谢@ironmike Sure-对于缓存，我的意思是将输出保存到作用域中的一个变量（即
$（document）.ready
回调中），这样您就不会不必要地继续搜索DOM，只需引用该变量即可。有关快速解释和一些陷阱，请参阅。有关不绑定重复事件的信息，请参见，其目的是解决此类问题。与
.on（）绑定的事件。
堆栈。：）谢谢你，科尔！工作完美，我已经了解了问题所在，您提出了未来的改进建议，完美地回答了我的问题，我真的很感激！我想实现您建议的调整，但是，我对jquery/JS非常陌生，所以我不理解您所说的“绑定duplicate.lightbox click事件”和“考虑缓存您更常用的选择器”是什么意思-您可以进一步向我解释一下吗。再次感谢@ironmike Sure-对于缓存，我的意思是将输出保存到作用域中的一个变量（即
$（document）.ready
回调中），这样您就不会不必要地继续搜索DOM，只需引用该变量即可。有关快速解释和一些陷阱，请参阅。有关不绑定重复事件的信息，请参见，其目的是解决此类问题。与
.on（）绑定的事件。
堆栈。：）
.content {
  position: relative;
  width: 60%;
  height: auto;
  transition: all 200ms ease-in-out; }

  .content img {
    margin-top: -150px;
    width: 100%;
    height: auto;
    transition: all 900ms ease-in-out; }

    .content img.img-is-showing {
      margin-top: 0; }

$(document).ready(function(){

$('.lightbox-trigger').on('click', function(){
var image_href = $(this).attr('href');
$('.lightbox').addClass('is-showing');
$('.content img').addClass('img-is-showing');

$('.lightbox-image').attr('src', image_href);
$('.lightbox').show();

$('.lightbox').on('click', function(){
  $(this).removeClass('is-showing');
});

});
});

$('.lightbox-trigger').on('click', function(){
  var image_href = $(this).attr('href');

  $('.lightbox').addClass('is-showing');
  $('.lightbox-image').attr('src', image_href);
  $('.lightbox').show();

  $('.content img').addClass('img-is-showing');

  $('.lightbox').on('click', function(){
    $(this).removeClass('is-showing');
    $('.content img').removeClass('img-is-showing');
  });
});