jquery - 图像快速消失而不是淡出

Question

大家好，我正在尝试使用 css3 全屏 slider 。现在的问题是每当我做一个图像 fadeOut 它突然隐藏就像我已经编码了 hide() 方法一样......这是代码，CSS

   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 方法不起作用，它突然使图像消失。你们能告诉我哪里错了吗？谢谢。

好的，这是一个 fiddle ，<强> http://jsfiddle.net/4xymL/

我不知道图像以某种方式没有显示，请尝试使用一些示例图像，谢谢。太多了。

Answer 1

更改不透明度，如 demo 所示然后在延迟 5s 后淡出(这取决于你在 zoom in css 中提到的内容。

 $(document).ready(function () {

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


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

更新为淡出，因为单独改变不透明度不会删除图像，它仍然存在并且可以通过右键单击来验证。