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元素 DOES 在400ms后消失，但不会播放淡入淡出效果。如果我取消注释剩余的线条，它可以很好地改变图像。

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

Answer 1

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

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

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

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

Disable/turn off inherited CSS3 transitions

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

1 个答案: