0

嘿伙计们，我正在尝试使用 CSS3 全屏滑块。现在的问题是，每当我执行图像 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 方法不起作用，它突然使图像消失。你们能告诉我哪里错了吗？谢谢。

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

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

4

1 回答 1

2

更改此演示中所示的不透明度，然后在延迟 5 秒后淡出（这取决于您在放大 CSS 中提到的内容。 

 $(document).ready(function () {

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


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

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

于 2013-09-01T17:27:43.633 回答