Rumah > hujung hadapan web > tutorial js > jQuery animate(滑块滑动效果代码)_jquery

jQuery animate(滑块滑动效果代码)_jquery

WBOY
Lepaskan: 2016-05-16 18:37:35
asal
1385 orang telah melayarinya
jQuery animate(滑块滑动效果代码)_jquery
HTML
复制代码 代码如下:


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;

});
});


Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan