Bootstraps 的“img-thumbnail”取消了 jQuery Fade 效果答案

【问题标题】：Bootstraps's 'img-thumbnail' cancels jQuery Fade effectsBootstraps 的“img-thumbnail”取消了 jQuery Fade 效果
【发布时间】：2013-11-16 15:21:52
【问题描述】：

我在 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 元素 DOES 在 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;
}

【问题讨论】：

mainImg 变量中有什么？这些元素和类的 CSS 是什么？您在网站上是否有任何其他 js 可能“干扰”您当前的代码？
@ravb79 将这些信息添加到问题中。谢谢。
你能检查一下当你删除 .img-thumbnail 上的 css 过渡时会发生什么吗？
非常感谢，这行得通！请发布您的答案，以便我接受。

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

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

编辑：或者您可以尝试类似：

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

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

Disable/turn off inherited CSS3 transitions

【讨论】：

是的，我复制了 img-thumbnail 并删除了过渡。您可以看到我的问题中添加的修复程序。