Question

CSS：

body, html {
    height: 100%;
    margin: 0;
}

.container {
    position:relative;
    height: 100%;
    width: 100%;
    background-color: black;
}

.shrink {
    height: 0px;
    width: 0px;
    position: absolute;
    right: 0;
    -webkit-transition: opacity 4s ease-in-out;
    -moz-transition: opacity 4s ease-in-out;
    -o-transition: opacity 4s ease-in-out;
    transition: opacity 4s ease-in-out;
}

.shrink.active {
    height: 100%;
    width: 100%;
}

HTML：

<!doctype html>
<html>
    <head>
        <title></title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" media="screen" href="css/style.css"/>
        <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </head>
    <body>
        <div class="container">
          <img class="shrink active" src="http://dummyimage.com/1050x750/ffffff/0011ff.jpg&text=image1" />
          <img class="shrink" src="http://dummyimage.com/1050x750/ffffff/0011ff.jpg&text=image2" />
          <img class="shrink" src="http://dummyimage.com/1050x750/ffffff/0011ff.jpg&text=image3" />
        </div>
        <button id="prev">prev</button>
        <button id="next">next</button>
    </body>
</html>

JS：

$(function() {
    $("#next").click(function() {
        var active = $(".active");
        var next = active.next();
        if (next.length > 0) {
            active.removeClass("active");
            next.addClass("active");
        }
    });
    $("#prev").click(function() {
        var active = $(".active");
        var prev = active.prev();
        if (prev.length > 0) {
            active.removeClass("active");
            prev.addClass("active");
        }
    });
});

当我点击下一个或上一个时，活动图像应显示转换但不显示。我在这里想念什么？

Answer 1

为不透明度设置过渡？

transition: opacity 4s ease-in-out;

如果您打算进行不透明度转换，则应在活动和收缩状态中定义不透明度更改：

见这里：http://jsfiddle.net/jc6212/uRxKg/2/

css过渡 - 为什么这不起作用？

1 个答案: