jQuery transition effects like on flash

Question

I have take a look on jQuery transition effect on web like on image slider flash on this site http://bit.ly/2eMkoB but can't find similar transition effect on jQuery

How can I replicate this kind of transition from left to right arrow transition effect on jQuery?

Answer 1

I hope this code helps you and answers to your question.

HTML :

<div id="background">
    <div id="transition">
       <div class="pointer"></div>
       <div class="behind-pointer"></div>
    </div>
</div>
<div style="clear:both"></div>

CSS :

#transition {
  height : 100%;
  width : 100%;
}

.pointer {
  width : 0;
  height : 0;
  border-left: 70px solid transparent; /* Arrow width */
  float : left;
}

.behind-pointer {
  background-color : white; /* Color transition */
  height : 100%;
}


#background {
  height : 150px;
  width : 250px;
  background-color: black;
}

jQuery :

$(document).ready(function(){
    var color = $("#transition .behind-pointer").css("background-color");
    var transition = $("#transition");
    var transition_pointer = $("#transition .pointer");
    var left_width = new Number(transition_pointer.css("border-left-width").replace("px", ""));
    var behind_pointer = $("#transition .behind-pointer");

    transition.css("width", (transition.width() + left_width) + "px");
    transition.css("position", "relative").css("left", "-" + left_width + "px");
    transition_pointer.css("border-bottom", transition.height()/2 + "px solid " + color)
      .css("border-top", $("#transition").height()/2 + "px solid "+ color);
    behind_pointer.css("margin-left", left_width + "px");

    var width = transition.width();
    transition.animate({
        left : width - left_width,
        width : 0
    }, 2000, function(){ transition.hide(); });
});

Here there is a jsFiddle example