0

我在我的 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毫秒后消失，但不播放淡入淡出效果。如果我取消注释剩余的行，它可以很好地改变图像。

如果我img-thumbnail从class. 有没有办法让他们一起工作？

这是根据答案的新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;
}
4

1 回答 1

1

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

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

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

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

禁用/关闭继承的 CSS3 过渡

于 2013-11-06T11:27:55.670 回答