標籤：動畫 com back doc 20px log ati 網頁 min
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>滑鼠放上去透明度和位移都變化</title><style> * { margin:0; padding:0; } .dv1 { position: relative; left:0; top:200px; width:100px; height:300px; background-color: red; } .dv1 div { width:300px; height:300px; position: absolute; left:136px; top:0; background-color: orange; opacity: 0; }</style></head><body><div class=‘dv1‘><div></div></div></body><script src=‘http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js‘></script><script>//這個函數裡面有個坑：$(".dv1 div") . stop() 要不然只要滑鼠放上去幾次，函數就執行幾次，這是bug，所以務必要加上這句話 $(document).ready(function(){ $(".dv1").hover(function(){ $(‘.dv1 div‘).stop().animate({ left:"120px", opacity: 1 }) },function(){ $(‘.dv1 div‘).stop().animate({ left:"300px", opacity: 0 }) }) })</script></html>
用jquery的animate動畫函數做的網頁效果
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
