opacity transition change on click and transition end with jquery (Show/hide))

Question

So I'm trying to make a simple gallery where images change when you click the small image below it.

Image 1 & 4 and 2 & 5 and 3 & 6 are bound (if you click image 2 the images shown are 2 & 5)

The previous images fade out and new ones fade in. To do this I used transition end event.

problem is with the opacity animation Whenever you click it fades out, but when it shows it doesnt fade in, but if you click the same image it works as intended and I can't quite figure out why.

Here is the code:

<div class="gallery">
    <div class="img-area">
        <img data-bind="1" class="current" src="http://placehold.it/400x200">
        <img data-bind="1" class="current" src="http://placehold.it/500x250">
        <img data-bind="2" class="hidden" src="http://placehold.it/300x150">
        <img data-bind="2" class="hidden" src="http://placehold.it/250x125">
        <img data-bind="3" class="hidden" src="http://placehold.it/200x100">
        <img data-bind="3" class="hidden" src="http://placehold.it/350x175">
    </div>
    <ul class="img-selection">
        <li><img data-bind="1" src="http://placehold.it/400x200"></li>
        <li><img data-bind="2" src="http://placehold.it/300x150"></li>
        <li><img data-bind="3" src="http://placehold.it/200x100"></li>
        <li><img data-bind="1" src="http://placehold.it/500x250"></li>
        <li><img data-bind="2" src="http://placehold.it/250x125"></li>
        <li><img data-bind="3" src="http://placehold.it/350x175"></li>
    </ul>
</div>

<script>
var imgIndex = 1;
$(document).ready( function() {
    $(".hidden").hide();
    $(".hidden").css({ opacity:0 });
    $(".gallery .img-selection li img").click( function() {
        $(".gallery .img-area .current").css({ opacity:0 });
        imgIndex = $(this).data("bind");
        console.log(imgIndex);
        $(".gallery .img-area .current:eq(0)").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',   
        function() {
            console.log("transition end");
            $(".gallery .img-area .current").hide();
            $(".gallery .img-area .current").removeClass("current");
            $(".gallery .img-area img[data-bind=" +imgIndex+ "]").show();
            $(".gallery .img-area img[data-bind=" +imgIndex+ "]").css({ opacity:1 });
            $(".gallery .img-area img[data-bind=" +imgIndex+ "]").addClass("current");
        });
    });
});
</script>
<style>
.gallery {
    width: 50%;
    margin: auto;
}
.gallery > .img-area {
    width: 100%;
}
.gallery > .img-area > img {
    width: 49.7%;
    transition: opacity 1s linear;
    -moz-transition: opacity 1s linear;
    -webkit-transition: opacity 1s linear;
}
.gallery > .img-selection {
    width: 100%;
    padding: 0;
    margin: 0;
}
.gallery > .img-selection > li {
    display: inline;
    list-style: none;
}
.gallery > .img-selection > li > img {
    width: 16%;
}
</style>

http://jsfiddle.net/n6qW7/

The fiddle isn't coming up for me for some reason, but one thing that jumps out at me is you are continually re-binding a new handler for the `transitionEnd` event with each and every image click. So if you click the image 5 times, you are going to execute your `transitionEnd` handler 5 times. Move it out of the click handler. — Mister Epic, Jun 23 '14 at 20:12
I've tried that and it doesn't fix it, it is .one and i am only clicking once but I can see that there may be a problem with multiple clicks. But anyways, the reason I need to do it this way is because the images that show are variable and cannot be handled with a single *transitionEnd event. — user3542112, Jun 23 '14 at 20:24
OK I removed it from inside the click event handler anyways, and instead calling a showEvent function that will show the variable images — user3542112, Jun 23 '14 at 20:31

score 0 · Accepted Answer · edited May 23 '17 at 12:05

0

after some research it seems you cant do transitions the same time you are changing display property. (hide show)

CSS transitions don't work unless I use timeout

edited May 23 '17 at 12:05

Community

1
1

answered Jun 23 '14 at 20:39

user3542112

253
1
4
13

opacity transition change on click and transition end with jquery (Show/hide))

1 Answers1