圖像快速消失，而不是fadeOut

嘿傢伙我想在css3全屏滑塊上工作。現在的問題是，每當我做了一個形象的淡出它突然像揣，如果我有編碼的隱藏（）方法.. 這裏是代碼，的CSS圖像快速消失，而不是fadeOut

body { 
     margin: 0px; 
    } 

    #backgroundImageContainer { 
     height: 100%; 
     width: 100%; 
     position: fixed; 
    } 
    .backgroundImages { 
     width: 100%; 
     height: 100%; 
     position: absolute; 
     z-index: 1; 
    } 
    .animationZoomIN { 

     -webkit-transition: all 5.3s ease-out; 
     -moz-transition: all 5.3s ease-out; 
     -o-transition: all 5.3s ease-out; 
     transition: all 5.3s ease-out; 
     -moz-transform: scale(1.17); 
     -webkit-transform: scale(1.17); 
     -o-transform: scale(1.17); 
     transform: scale(1.17); 
     -ms-transform: scale(1.17); 
    } 
    #thumbsList { 
     position: absolute; 
     z-index: 2; 
     margin-top: 11px; 
     margin-right: 11px; 
     color: white; 
     font-family: verdana; 
     font-size: 13px; 
     list-style-type: none; 
    } 
    #thumbsList li { 
     float: left; 
    }

的JavaScript

$(document).ready(function() { 

     $('.backgroundImages').addClass('animationZoomIN'); 
     $('.backgroundImages').bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() { 


      $('.backgroundImages').fadeOut(1000);}); 
    });

並且html

<div id="backgroundImageContainer"> 
    <img class="backgroundImages" src="wallpaper-452100.png" /> 

</div> 
<ul id="thumbsList"> 
    <li>Steam Punk</li> 
    <li>Car</li> 

</ul>

注意.backgroundImages fadeOut方法不起作用，它突然使圖像消失。你們能告訴我我錯了嗎？謝謝。

確定這裏是一個小提琴， http://jsfiddle.net/4xymL/

我不知道圖像有點不diplaying，儘量使用一些樣本圖像，請，謝謝。太多了。

來源

2013-09-01 designerNProgrammer

A http://www.jsfiddle.net會幫你找到答案。 – Itay

對不起，我不明白。:( – designerNProgrammer

怎麼可以然後，我動畫後淡出圖像？ – designerNProgrammer

變化如本demo，然後5秒的延遲（這取決於你在放大CSS提到什麼後淡出的不透明度。

$(document).ready(function() { 

    $('.backgroundImages').addClass('animationZoomIN'); 
    $('.backgroundImages').bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() { 


     $('.backgroundImages').css("opacity", 0).delay(5000).fadeOut(); 
    }); 
});

更新，因爲單獨改變透明度將淡出不刪除圖片，它仍然存在，可以通過右鍵點擊進行驗證。

來源

2013-09-01 17:27:43 Lobo

圖像快速消失，而不是fadeOut

回答

相關問題