kshatriiya kshatriiya - 1 month ago 6
CSS Question

CSS transition duration not applying on first instance of transition effect

I'm trying to create a series of sliding divs triggered on press of a button. The idea is that each div will have a thumbnail and some text tied to it. Upon clicking left/right button, the divs will move their position accordingly.

My code can be seen in the jsfiddle below. I'm encountering 3 problems:

1) The "transition: left 2s" rule isn't applying on the first transition effect, it does on the subsequent ones.

2) I'd like the repeat pressing of the corresponding buttons to apply the left property value again so that I can slide the divs repeatedly.

3) Instead of the "right" button re-positioning the "left" property back to 0, I'd like to shift it back in the opposite direction with the previous left property value.

Essentially I'm trying to recreate the slider found on this side.

http://www.euphoriumbakery.com/

Any help or input will be greatly appreciated.

Thank you very much for your help.

https://jsfiddle.net/kshatriiya/g709swLg/1/



window.onload = function() {



$("#left").on("click", function() {


$("#view").css("left", "-262px");


});

$("#right").on("click", function() {


$("#view").css("left", "0px");


});

}

#galwrapper {
width: 650px;
height: 400px;
display: block;
overflow: hidden;
}
#view {
position: relative;
width: 1423px;
transition: left 2s;
}
.col-md {
display: inline-block;
margin-top: 100px;
width: 18%;
}
.thumb img {
opacity: 0.9;
height: auto;
width: auto;
max-height: 150px;
max-width: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="galwrapper">
<div id="view">

<div class="col-md">
<div class="thumb">
<img class="img-rounded" src="http://netdna.walyou.netdna-cdn.com/wp-content/uploads/2010/09/retrocake1.jpg">
<div class="caption">
<h4>Retro Cake</h4>
</div>
</div>
</div>

<div class="col-md">
<a href="#" class="thumb active">
<img class="img-rounded" src="https://i.ytimg.com/vi/dh8ii5sbvyc/maxresdefault.jpg">
<div class="caption">
<h4>Strawberry Cake</h4>
</div>
</a>
</div>

<div class="col-md" id="mid">
<a href="#" class="thumb">
<img src="https://i.ytimg.com/vi/dh8ii5sbvyc/maxresdefault.jpg">
<div class="caption">
<h4>Retro Cake</h4>
</div>
</a>
</div>




XYZ XYZ
Answer
#view {
 position: relative;
 width: 1423px;
 left:0;
 transition: left 2s;
}

Initially make left:0; for the div with id view https://jsfiddle.net/81tqeof4/6/

and for sliding effect get the current left position and update the position.check fiddle for an example

$("#left").on("click", function(){

    var leftPosition =  parseInt($("#view").position().left) - 256; 

     $("#view").css("left", -Math.abs(leftPosition));

 });