今天给大家介绍一个Jquery实现连续过渡是的效果。只需要几行代码,我们能让一个方块渐变+缩放比例地飞来飞去。是不是很好玩呢?好啦,还是先看看关键技术吧。
第一行: 当 <a class="run"> 被点击
第一行: 激活 <div id="box"> 的不透明度(opacity)=0.1,直到值达到400px,速度达到1200px/ms
第一行: 当opacity=0.4, top=160px,height=20,width=20,以"slow"显示
第一行: 当opacity=1, left=0, height=100, width=100,也以"slow"显示
第一行: 当opacity=1, left=0, height=100, width=100, 也以"slow"显示
第一行: 当top=0, 以"fast"显示
第一行: 然后,以常速上滑 (default speed = "normal")
第一行: 然后以"slow"下滑
第一行:返回失效会阻止浏览器跳向链接锚点。
关键代码:
$(document).ready(function(){
$(".run").click(function(){
$("#box").animate({opacity: "0.1", left: "+=400"}, 1200).animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow").animate({opacity: "1", left:
"0", height: "100", width: "100"}, "slow").animate({top: "0"}, "fast").slideUp().slideDown("slow")
return false;
});
});
