CODEWITHSUNDEEP
css
Naor
Naor

Reputation: 24053

css transitions - why is this not working?

I have this css3 transition code: 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");
        }
    });
});

When I click on next or prev, the active image should show transition but it doesn't. What am I missin here?

Upvotes: 0

Views: 115

Answers (1)

Jon Clagg
Jon Clagg

Reputation: 224

The transition is set for opacity? 

transition: opacity 4s ease-in-out;

If you intended an opacity transition, then opacity changes should be defined in your active and shrink statuses:

see here: http://jsfiddle.net/jc6212/uRxKg/2/

Upvotes: 4

Related Questions