我已经查看了网页上的 jQuery 过渡效果,例如本网站http://bit.ly/2eMkoB上的图像滑块 Flash,但在 jQuery 上找不到类似的过渡效果
如何在 jQuery 上复制这种从左到右箭头过渡效果的过渡?
我已经查看了网页上的 jQuery 过渡效果,例如本网站http://bit.ly/2eMkoB上的图像滑块 Flash,但在 jQuery 上找不到类似的过渡效果
如何在 jQuery 上复制这种从左到右箭头过渡效果的过渡?
我希望这段代码可以帮助您并回答您的问题。
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(); });
});
这里有一个 jsFiddle 例子