jQueryanimate(滑块滑动效果代码)_jquery

来源：动视网责编：小采时间：2020-11-27 20:46:40

jQueryanimate(滑块滑动效果代码)_jquery

jQueryanimate(滑块滑动效果代码)_jquery:HTML 代码如下: Run Run CSS 代码如下: body {}{ margin: 20px auto; padding: 0; width: 580px; font: 80%/120% Arial, Helvetica, sans-serif; } a {}{ font-weight: bold; color: #000000;

推荐度：

点击下载本文 文档为doc格式

导读jQueryanimate(滑块滑动效果代码)_jquery:HTML 代码如下: Run Run CSS 代码如下: body {}{ margin: 20px auto; padding: 0; width: 580px; font: 80%/120% Arial, Helvetica, sans-serif; } a {}{ font-weight: bold; color: #000000;

HTML
代码如下:

Run

CSS
代码如下:

JavaScript
代码如下:
$(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;

});
});

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Chainable Transition Effects</title> </ script> $(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; }); }); </ script> <style type="text/css"> body { margin: 20px auto; padding: 0; width: 580px; font: 80%/120% Arial, Helvetica, sans-serif; } a { font-weight: bold; color: #000000; } #box { background: #6699FF; height: 100px; width: 100px; position: relative; } </style> </head> <body> <p>Run</p> </body> </html>
[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

jQueryanimate(滑块滑动效果代码)_jquery

推荐度：

点击下载本文 文档为doc格式

标签：代码效果代码代码

热门焦点

jQueryanimate(滑块滑动效果代码)_jquery

jQueryanimate(滑块滑动效果代码)_jquery

jQueryanimate(滑块滑动效果代码)_jquery

最新推荐

猜你喜欢

热门推荐