jquery使用animate方法實(shí)現(xiàn)控制元素移動(dòng)
更新時(shí)間：2015年03月27日 09:39:06 作者：上大王
這篇文章主要介紹了jquery使用animate方法實(shí)現(xiàn)控制元素移動(dòng),涉及jQuery中animate方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了jquery使用animate方法實(shí)現(xiàn)控制元素移動(dòng)。分享給大家供大家參考。具體分析如下：
通過(guò)jquery的animate方法控制元素移動(dòng)，這里需要將元素的位置定義為relative, fixed, 或者 absolute!
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position,
and cannot be moved. To manipulate the position,
remember to first set the CSS position property
of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;
height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- jQuery移動(dòng)和復(fù)制dom節(jié)點(diǎn)實(shí)用DOM操作案例
- jQuery拖動(dòng)div、移動(dòng)div、彈出層實(shí)現(xiàn)原理及示例
- 基于jquery的從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面的指定位置的實(shí)現(xiàn)代碼（帶平滑移動(dòng)的效果）
- jQuery 移動(dòng)端artEditor富文本編輯器
- jQuery插件實(shí)現(xiàn)適用于移動(dòng)端的地址選擇器
- jQuery操作dom實(shí)現(xiàn)彈出頁(yè)面遮罩層(web端和移動(dòng)端阻止遮罩層的滑動(dòng))
- jquery實(shí)現(xiàn)移動(dòng)端點(diǎn)擊圖片查看大圖特效
- jQuery移動(dòng)web開發(fā)之頁(yè)面跳轉(zhuǎn)和加載外部頁(yè)面的實(shí)現(xiàn)
- jquery實(shí)現(xiàn)tr元素的上下移動(dòng)示例代碼
- 基于jquery實(shí)現(xiàn)左右上下移動(dòng)效果
相關(guān)文章
用jquery修復(fù)在iframe下的頁(yè)面錨點(diǎn)失效問(wèn)題
iframe頁(yè)面沒(méi)有滾動(dòng)條，在父窗體中出現(xiàn)滾動(dòng)條，錨點(diǎn)標(biāo)記就會(huì)失效，用js判斷頁(yè)面是否被嵌套，用js計(jì)算iframe在父窗體位置2014-08-08
IE8下jQuery改變png圖片透明度時(shí)出現(xiàn)的黑邊
這些天在做一個(gè)效果，鼠標(biāo)經(jīng)過(guò)，PNG圖片由透明變成不透明, 但是會(huì)出現(xiàn)黑邊，晚上查了好多辦法，分別對(duì)IE8設(shè)置過(guò)濾器啊等等，都不見效果。最終在熱心網(wǎng)友的幫助下解決了問(wèn)題，下面我們就來(lái)分析下2015-08-08
jQuery 滑動(dòng)方法slideDown向下滑動(dòng)元素
通過(guò) jQuery，您可以在元素上創(chuàng)建滑動(dòng)效果，jQuery slideDown() 方法用于向下滑動(dòng)元素，下為大家介紹下其參數(shù)含義2014-01-01
jQuery EasyUI tree 使用拖拽時(shí)遇到的錯(cuò)誤小結(jié)
在我使用tree拖拽時(shí)總是失敗，控制臺(tái)輸出了很多錯(cuò)誤。經(jīng)過(guò)問(wèn)題跟蹤分析最終找到的錯(cuò)誤原因，下面小編給大家分享下，感興趣的朋友參考下2016-10-10
這篇文章主要介紹了jQuery分組選擇器簡(jiǎn)單用法,結(jié)合實(shí)例形式分析了使用jQuery分組選擇器動(dòng)態(tài)設(shè)置頁(yè)面元素屬性相關(guān)操作技巧,需要的朋友可以參考下2019-04-04
用jquery獲取自定義的標(biāo)簽屬性的值簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇用jquery獲取自定義的標(biāo)簽屬性的值簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
JQuery移動(dòng)頁(yè)面開發(fā)之屏幕方向改變與滾屏的實(shí)現(xiàn)
這篇文章主要介紹了JQuery移動(dòng)頁(yè)面開發(fā)之隨屏幕方向改變與滾屏的實(shí)現(xiàn),通過(guò)相關(guān)兩個(gè)事件的添加來(lái)達(dá)到響應(yīng)移動(dòng)設(shè)備上操作的效果,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了jQuery實(shí)現(xiàn)拖拽效果插件的方法,較為詳細(xì)的分析了jQuery拖拽效果的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-03-03
jquery 獲取 outerHtml 包含當(dāng)前節(jié)點(diǎn)本身的代碼
jQuery.html() 是獲取當(dāng)前節(jié)點(diǎn)下的html代碼，并不包含當(dāng)前節(jié)點(diǎn)本身的代碼，后來(lái)實(shí)驗(yàn)發(fā)現(xiàn)有一個(gè)jQuery的一個(gè)方法可以解決2014-10-10
jQuery實(shí)現(xiàn)html table行Tr的復(fù)制、刪除、計(jì)算功能
這篇文章主要介紹了jQuery實(shí)現(xiàn)html table行Tr的復(fù)制、刪除、計(jì)算功能,涉及jQuery針對(duì)table表格的常見復(fù)制、添加、刪除與計(jì)算行數(shù)等簡(jiǎn)單操作技巧,需要的朋友可以參考下2017-07-07