Question

嘿伙计们我正在尝试使用css3全屏滑块。现在的问题是每当我做一个图像淡入淡出它突然隐藏，就像我已经编码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方法不起作用，它突然使图像消失。你能告诉我我错在哪里吗？谢谢。

好的，这是一个小提琴，的 http://jsfiddle.net/4xymL/

我不知道图像不知何故不是diplaying，请尝试使用一些样本图片，谢谢。太多了。

Answer 1

如此demo所示更改不透明度，然后在延迟5秒后逐渐淡出（这取决于您在缩放css时提到的内容。

 $(document).ready(function () {

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


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

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

图像快速消失而不是fadeOut

1 个答案: