[jQuery]动画效果
$(function () { //列队动画,递归自调用 $(".show").click(function () { $(".test").first().show("fast", function testShow() { $(this).next().show("fast", testShow); }); }); $(".hide").click(function () { $(".test").last().hide("fast", function testShow() { $(this).prev().hide("fast", testShow); }); }); //累加向右移动 $(".button").click(function () { $(".box").animate({ left: '+=100px' }, 'slow'); }); // 列队动画 $(".button").click(function () { $(".box") .slideUp("slow") .slideDown("slow") .queue(function (next) { $(this).css("background", "orange"); next(); }).hide("slow"); }) // 列队动画 $(".button").click(function () { $(".box") .slideUp("slow") .slideDown("slow", function () { $(this).clearQueue(); //清除之后的动画 }) .queue(function (next) { $(this).css("background", "orange"); next(); }).hide("slow"); }); $(".stop").click(function () { $(".box").stop(); $(".box").stop(true); }) //如果有列队动画,停止的话,那么会停止掉第一个列队动画,然后继续执行后面的列队动画 //第一个参数,如果为true,就是停止并清除后面的列队动画,动画即完全停止,默认值为false //第二个参数,如果为true,停止后会跳转到末尾的位置上,默认值为false // delay(1000) 延迟一秒后执行 $(".box").slideToggle(function () { $(this).slideToggle("slow", arguments.callee); //无限执行 }); $(":animated").stop().css("background", "blue"); //查找并停止当前动画,并更换颜色 $.fx.off = true; //全局参数 关闭动画 $(".button").click(function () { $(".box").animate({ left: "300px" }, 3000, 'swing'); // 两头慢 中间快 $(".pox").animate({ left: "300px" }, 3000, 'linear'); //匀速执行 }); });
QQ:619722510