在旋轉木馬中的圖像之間褪色

我一直在試圖理解爲什麼我的旋轉木馬不會在過渡之間褪色。它按預期循環，但似乎並沒有應用過渡效應來使一個面板褪色到下一個面板。在旋轉木馬中的圖像之間褪色

這是我到目前爲止有：

/* Javascript */ 
function cycle() { 
    var active = $('.carousel .item.active'); 
    var panels = $('.carousel .item'); 
    var pos = panels.index(active); 
    var next = panels.eq((pos >= 5) ? 0 : ++pos); 

    next.addClass('active'); 
    active.removeClass('active'); 
} 

var interval = setInterval(cycle, 2000); 

/* CSS */ 
.carousel-inner { 
    position: relative; 
    width: 100%; 
    overflow: hidden; 
} 
.carousel .item { 
    -webkit-transition: opacity 0.6s ease-in-out; 
    -moz-transition: opacity 0.6s ease-in-out; 
    -o-transition: opacity 0.6s ease-in-out; 
    transition: opacity 0.6s ease-in-out; 
    opacity: 0; 
} 
.carousel .item.active { 
    opacity: 1; 
} 

/* HTML */ 
<div id="id_landing_carousel" class="carousel slide"> 
    <div class="carousel-inner"> 
     <div class="item" data-nav-button="nav-home"> 
      <img src="/media/carousel/home.png"> 
      <div class="carousel-caption"> 
       <h4><p>Welcome</p></h4> 
      </div> 
     </div> 
     <div class="item" data-nav-button="nav-residential"> 
      <img src="/media/carousel/residential.jpg"> 
      <div class="carousel-caption"> 
       <h4><p>Residential</p></h4> 
      </div> 
     </div> 
     <div class="item" data-nav-button="nav-commercial"> 
      <img src="/media/carousel/commercial.jpg"> 
      <div class="carousel-caption"> 
       <h4><p>Commercial</p></h4> 
      </div> 
     </div> 
     <div class="item" data-nav-button="nav-service"> 
      <img src="/media/carousel/service.jpg"> 
      <div class="carousel-caption"> 
       <h4><p>Service</p></h4> 
      </div> 
     </div> 
     <div class="item active" data-nav-button="nav-blog"> 
      <img src="/media/carousel/blog.jpg"> 
      <div class="carousel-caption"> 
       <h4><p>Blog</p></h4> 
      </div> 
     </div> 
     <div class="item" data-nav-button="nav-contact"> 
      <img src="/media/carousel/contact.jpg"> 
      <div class="carousel-caption"> 
       <h4><p>Contact us</p></h4> 
      </div> 
     </div> 
    </div> 
</div>

如果有人在給我「米做錯了任何見解，我會非常感激

來源

2012-10-12 notanumber

如果你提供了一個jsfiddle，它會有所幫助 – Colleen

我把它放在一個小提琴中[這裏]（http：// jsfiddle。 net/ESTpu /），並放慢轉換速度，以更好地感受我的感受t正在工作。我不太確定問題出在哪裏，因爲我可以告訴它在chrome 22中漸漸淡入淡出。你在測試什麼瀏覽器？ – Bubbles

你想讓圖像重疊嗎？ –

媽沒關係解決它。另一種風格是設置旋轉木馬的div元素來顯示：none當它不是active

來源

2012-10-12 21:19:49 notanumber

在旋轉木馬中的圖像之間褪色

回答

相關問題