javascript - Bootstraps的 'img-thumbnail'取消jQuery Fade效果

Question

我在我的 HTML 中同时使用了 jQuery 和 Bootstrap，图像如下所示:

<img id="imgMain" class="img-responsive img-thumbnail" src="img/product.png" />

在我的 javascript 中，我调用了效果:

mainImg.fadeOut(400, function () {
    //mainImg.attr("src", imgs[index]);

    //mainImg.fadeIn(400, function () {
    //    mainImg.inEffect = false;
    //});
});

其中mainImg是上面img的选择器:$("#mainImg")。我只使用标准的 Bootstrap CSS，没有修改或任何其他 CSS。并且除了上面的 Javascript、bootstrap.js 和 jQuery.js 之外，没有使用更多的外部 javascript。

img 元素 确实 在 400 毫秒后消失，但没有播放淡出效果。如果我取消注释剩余的行，它可以很好地改变图像。

如果我从 class 中删除 img-thumbnail，效果就会正确执行。有没有办法让它们一起工作？

根据答案，这是新的 CSS:

.img-no-transition-thumbnail {
      display: inline-block;
  height: auto;
  max-width: 100%;
  padding: 4px;
  line-height: 1.428571429;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 4px;
}

Answer 1

如评论中所述，删除过渡显然可以解决问题。我确实建议尝试一种不同的方法，而不是完全消除过渡效果，即。简单地为您想要以上述方式操作的元素使用不同的或创建一个单独的类，从而保持 Bootstrap 样式表完整而无需覆盖它本身。

编辑:或者你可以尝试类似的东西:

.img-thumbnail.noTransition {
    -moz-transition: none;
    -webkit-transition: none;
    -o-transition: color 0 ease-in;
    transition: none;
}

只需将 .noTransition 添加到特定元素即可。

Disable/turn off inherited CSS3 transitions