【发布时间】：2014-03-19 05:25:37
【问题描述】：
我使用这篇文章中的纯 CSS 代码使我的轮播褪色。正如问题所示，有没有办法让它在 IE9 中也消失？似乎 normalizr 并不能完全为我完成这项工作，应该这样做吗？我搜索了过渡后备，没有找到任何东西，当我再次查看modernizr时我看到它有它。我不太明白轮播是如何工作的，所以我可以解释为什么当我有 IE9 时 exacly 没有得到 jquery 替换。我该怎么做？
Can the Twitter Bootstrap Carousel plugin fade in and out on slide transition
CSS
.carousel.fade {
opacity: 1;
}
.carousel.fade .item {
-moz-transition: opacity ease-in-out 1.5s;
-o-transition: opacity ease-in-out 1.5s;
-webkit-transition: opacity ease-in-out 1.5s;
transition: opacity ease-in-out 1.5s;
left: 0 !important;
opacity: 0;
top: 0;
position: absolute;
width: 100%;
display: block !important;
z-index: 100;
}
.carousel.fade .item:first-child {
top: auto;
position: relative;
}
.carousel.fade .item.active {
opacity: 1;
-moz-transition: opacity ease-in-out 1.5s;
-o-transition: opacity ease-in-out 1.5s;
-webkit-transition: opacity ease-in-out 1.5s;
transition: opacity ease-in-out 1.5s;
z-index: 200;
}
HTML
<div class="crsl-wrap">
<div id="shop-crsl-1" class="carousel slide carousel-fade shop-crsl hidden-xs" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-4">
<div class="shop-col-item">
<div class="photo">
<img src="images/sc/shop-crsl-1.png" class="img-responsive" alt="a">
</div>
<div class="info">
<div>
<div class="price">
<h5>Casual Suit</h5>
<h5 class="main-text-color">$199.99</h5>
</div>
<div class="rating">
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
<div class="btns clear-left">
<p class="btn-add"><i class="fa fa-shopping-cart"></i><a href="#">Add to cart</a></p>
<p class="btn-details"><i class="fa fa-list"></i><a href="#">More details</a></p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="shop-col-item">
<div class="photo">
<img src="images/sc/shop-crsl-2.png" class="img-responsive" alt="a">
</div>
<div class="info">
<div>
<div class="price">
<h5>Night Suit</h5>
<h5 class="main-text-color">$249.99</h5>
</div>
<div class="rating">
</div>
</div>
<div class="btns clear-left">
<p class="btn-add"><i class="fa fa-shopping-cart"></i><a href="#">Add to cart</a></p>
<p class="btn-details"><i class="fa fa-list"></i><a href="#">More details</a></p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="shop-col-item">
<div class="photo">
<img src="images/sc/shop-crsl-3.png" class="img-responsive" alt="a">
</div>
<div class="info">
<div>
<div class="price">
<h5>Elegant Suit</h5>
<h5 class="main-text-color">$149.99</h5>
</div>
<div class="rating">
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
<div class="btns clear-left">
<p class="btn-add"><i class="fa fa-shopping-cart"></i><a href="#">Add to cart</a></p>
<p class="btn-details"><i class="fa fa-list"></i><a href="#">More details</a></p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-4">
<div class="shop-col-item">
<div class="photo">
<img src="images/sc/shop-crsl-1.png" class="img-responsive" alt="a">
</div>
<div class="info">
<div>
<div class="price">
<h5>Super-Casual Suit</h5>
<h5 class="main-text-color">$199.99</h5>
</div>
<div class="rating">
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
<div class="btns clear-left">
<p class="btn-add"><i class="fa fa-shopping-cart"></i><a href="#">Add to cart</a></p>
<p class="btn-details"><i class="fa fa-list"></i><a href="#">More details</a></p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="shop-col-item">
<div class="photo">
<img src="images/sc/shop-crsl-2.png" class="img-responsive" alt="a">
</div>
<div class="info">
<div>
<div class="price">
<h5>Super-Night Suit</h5>
<h5 class="main-text-color">$249.99</h5>
</div>
<div class="rating">
</div>
</div>
<div class="btns clear-left">
<p class="btn-add"><i class="fa fa-shopping-cart"></i><a href="#">Add to cart</a></p>
<p class="btn-details"><i class="fa fa-list"></i><a href="#">More details</a></p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="shop-col-item">
<div class="photo">
<img src="images/sc/shop-crsl-3.png" class="img-responsive" alt="a">
</div>
<div class="info">
<div>
<div class="price">
<h5>Super-Elegant Suit</h5>
<h5 class="main-text-color">$149.99</h5>
</div>
<div class="rating">
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
<div class="btns clear-left">
<p class="btn-add"><i class="fa fa-shopping-cart"></i><a href="#">Add to cart</a></p>
<p class="btn-details"><i class="fa fa-list"></i><a href="#">More details</a></p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Controls -->
<div class="controls">
<a class="left fa fa-chevron-left" href="#shop-crsl-1" data-slide="prev"> </a>
<a class="right fa fa-chevron-right" href="#shop-crsl-1" data-slide="next"> </a>
</div>
</div>
【问题讨论】：
标签： jquery html css twitter-bootstrap