Jquery實(shí)現(xiàn)簡(jiǎn)單的動(dòng)畫(huà)效果代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://demo.jb51.net/jslib/jquery/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#panel").css("opacity", "0.1");//設(shè)置透明度
$("#panel").click(function () {
$(this).animate({ left: "400px", height: "200px", opacity: "1" }, 3000)//在3秒內(nèi)向右移動(dòng)400px,高度放大200px,透明度改為1
.animate({ top: "200px,width:200px" }, 3000)
.fadeOut("slow"); //以淡出的方式隱藏
});
})
</script>
</head>
<body>
<div id="panel" style=" position:relative; background-color:Olive; height:100px; width:100px; border:1px; border-color:Aqua;">
</div>
</body>
</html>
相關(guān)文章
使用jquery的cookie實(shí)現(xiàn)登錄頁(yè)記住用戶名和密碼的方法
今天小編就為大家分享一篇關(guān)于使用jquery的cookie實(shí)現(xiàn)登錄頁(yè)記住用戶名和密碼的方法,小編覺(jué)得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來(lái)看看吧2019-03-03完美解決jQuery fancybox ie 無(wú)法顯示關(guān)閉按鈕的問(wèn)題
下面小編就為大家?guī)?lái)一篇完美解決jQuery fancybox ie 無(wú)法顯示關(guān)閉按鈕的問(wèn)題。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11jquery 淡入淡出效果的簡(jiǎn)單實(shí)現(xiàn)
本篇文章主要是對(duì)jquery淡入淡出效果的簡(jiǎn)單實(shí)例進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02詳解ajax的data參數(shù)錯(cuò)誤導(dǎo)致頁(yè)面崩潰
本篇文章給大家詳細(xì)分析了ajax的data參數(shù)錯(cuò)誤導(dǎo)致頁(yè)面崩潰的原因以及解決辦法,有需要的朋友參考學(xué)習(xí)下。2018-04-04jquery 仿錨點(diǎn)跳轉(zhuǎn)到頁(yè)面指定位置的實(shí)例
下面小編就為大家?guī)?lái)一篇jquery 仿錨點(diǎn)跳轉(zhuǎn)到頁(yè)面指定位置的實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02EasyUI學(xué)習(xí)之Combobox下拉列表(1)
這篇文章主要為大家詳細(xì)介紹了EasyUI學(xué)習(xí)之Combobox下拉列表的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12Jquery 數(shù)據(jù)選擇插件Pickerbox使用介紹
目前市面上很少見(jiàn)或幾乎沒(méi)有這數(shù)據(jù)(對(duì)象)選擇插件.比如,點(diǎn)擊input , select 元素時(shí)彈出div(窗口),載入數(shù)據(jù)讓用戶選擇數(shù)據(jù),選擇后在填充回對(duì)應(yīng)的元素.2012-08-08jQuery-ui引入后Vs2008的無(wú)智能提示問(wèn)題解決方法
引入jQuery-vsdoc文件后,jQuery庫(kù)就能智能提示了,解決方法很簡(jiǎn)單在jQuery-ui的目錄下再加入一個(gè)空的JS文件,命名jquery-ui-vsdoc.js2014-02-02jQuery實(shí)現(xiàn)類似淘寶購(gòu)物車全選狀態(tài)示例
今天寫(xiě)了個(gè)類似淘寶購(gòu)物車全選狀態(tài),看下截圖,效果還不錯(cuò)吧,具體的實(shí)現(xiàn)html及jQuery代碼如下,感興趣的朋友可以參考下哈2013-06-06