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 やその他の 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 に答える