0

私はこのcss3遷移コードを持っています：http：//jsfiddle.net/uRxKg/

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");
        }
    });
});

[次へ]または[前へ]をクリックすると、アクティブな画像にトランジションが表示されますが、表示されません。私はここで何が恋しいですか？

4

1 に答える 1

4

トランジションは不透明度に設定されていますか？

transition: opacity 4s ease-in-out;

不透明度の移行を意図している場合は、不透明度の変更をアクティブステータスと縮小ステータスで定義する必要があります。

ここを参照してください：http：//jsfiddle.net/jc6212/uRxKg/2/

于 2012-11-18T14:53:51.300 に答える