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

Bootstraps's 'img-thumbnail' cancels jQuery Fade effects

本文关键字：jQuery Fade 效果 取消 img-thumbnail Bootstraps      更新时间：2023-09-26

我在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元素在 400ms 后确实消失，但不播放淡入淡出效果。如果我取消注释其余行，它可以很好地更改图像。

如果我从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;
}

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

编辑：或者你可以尝试这样的事情：

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

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

禁用/关闭继承的 CSS3 过渡

相关文章：