jQuery转换效果就像在flash上​​一样

Question

我已经看过网站上的jQuery过渡效果，例如此网站http://bit.ly/2eMkoB上的图片滑块flash，但无法在jQuery上找到类似的过渡效果

如何在jQuery上从左到右箭头过渡效果复制这种过渡？

Answer 1

我希望此代码可以帮助您回答您的问题。

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有一个jsFiddle示例