jQuery过渡效果就像在flash上一样

Question

我看过 jQuery 在网络上的过渡效果，就像在这个网站上的图像滑块闪光灯上一样 http://bit.ly/2eMkoB 但在 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;
}

j查询 ：

$(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(); });
});

这里有一个jsFiddle示例