【前端】jQuery動畫

阿新 • • 發佈：2018-12-22

<!DOCTYPE html>
<html>
<head>
	<title>jQuery| Effects & Animate</title>
	<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
	<style>
		body{
			font-size: 17px;
			font-family: arial;
			background: #f4f4f4;
			line-height: 1.5em;
		}
		header 
{
			background:#333;
			color:#fff;
			padding:20px;
			text-align: center;
			border-bottom: 4px #000 solid;
			margin-bottom: 10px;
		}
		#container{
			width:90%;
			margin:auto;
			padding:10px;
		}

		#box{
			background:#333;
			color:#fff;
			width:500px;
			height:90px;
			padding:40px;
			text-align: 
center;
		}

		#box2{
			background:red;
			width:100px;
			height:100px;
			position:relative;
		}
	</style>
</head>
<body>
	<header>
		<h1>jQuery Effects & Animate</h1>
	</header>
	<div id="container">
		<button id="btnFadeOut">Fade Out</button> 

		<button id="btnFadeIn">Fade In</button>
		<button id="btnFadeTog">Fade Toggle</button>

		<hr>

		<button id="btnSlideUp">Slide Up</button>
		<button id="btnSlideDown">SlideDown</button>
		<button id="btnSlideTog">Slide Toggle</button>
		<button id="btnStop">Stop</button>
		<hr>

		<div id="box"><h1>Hello World</h1></div>

		<hr>

		<button id="moveLeft">Move Left</button>
		<button id="moveRight">Move Right</button>
		<button id="moveAround">Move Around</button>
		<div id="box2"></div>
	</div>

	<script>
		$(document).ready(function(){
			$('#btnFadeOut').click(function(){
				$('#box').fadeOut(3000, function(){
					$('#btnFadeOut').text('Its Gone');
				});
			});
			$('#btnFadeIn').click(function(){
				$('#box').fadeIn(3000);
			});
			$('#btnFadeTog').click(function(){
				$('#box').fadeToggle(1000);
			});
			$('#btnSlideDown').click(function(){
				$('#box').slideDown(3000);
			});
			$('#btnSlideUp').click(function(){
				$('#box').slideUp(3000);
			});
			$('#btnSlideTog').click(function(){
				$('#box').slideToggle(3000);
			});
			$('#btnStop').click(function(){
				$('#box').stop();
			});

			$('#moveRight').click(function(){
				$('#box2').animate({
					left: 500,
					height: '300px',
					width:'300px',
					opacity: '0.5'
				});
			});

			$('#moveLeft').click(function(){
				$('#box2').animate({
					left: 0,
					height: '100px',
					width: '100px',
					opacity:'1'
				});
			});

			$('#moveAround').click(function(){
				var box = $('#box2');
				box.animate({
					left: 300
				});
				box.animate({
					top: 300
				});
				box.animate({
					left:0,
					top: 300
				});
				box.animate({
					left: 0,
					top:0
				});
			});
		});
	</script>
</body>
</html>

程式碼片段備用。

END.

【前端】jQuery動畫

<!DOCTYPE html> <html> <head> <title>jQuery| Effects & Animate</title

【前端】jQuery DataTables 使用手冊（精簡版）【前端】jQuery DataTables 使用手冊（精簡版）

【前端】jQuery DataTables 使用手冊（精簡版）一、常用屬性 //把公共的設定項都放在這裡，就不需要每個頁面都設定一遍了，放在jQuery物件上是為了避免汙染全域性變數window.dataTablesSettings = { processing : false,//是否顯

【前端】jQuery常用基礎知識點總結

目錄 jQuery概念：入口函式： jQuery選擇器：樣式操作：屬性操作：特殊動畫：事件：事件冒泡：事件委託： jQuery中的DOM操作： jQuery概念： JQuery: JavaScript Query; 這

【前端】jQuery選擇器

<!DOCTYPE html> <html> <head> <title>jQuery | Selectors</title> <s

【前端】用jQuery實現瀑布流效果

scrollto title n) 個性避免 ive gets type turn jQuery實現瀑布流效果何為瀑布流：　　瀑布流，又稱瀑布流式布局。是比較流行的一種網站頁面布局，視覺表現為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷加載數據塊並附加

【前端】javascript+jQuery實現旋轉木馬效果輪播圖slider

pad 語句 borde nbsp strong 調用 define ide right 實現效果：實現原理：技術棧: javascript+jQuery+html+css 實現步驟： // 0. 獲取元素 // 1. 鼠標放置到輪播圖上，顯示兩側的

【從0到1學Web前端】jQuery中each()和$.each()的使用

引子：最近遇到一個問題，就是在each()函式中怎麼模擬for迴圈中的break和continue的操作。所以就查看了jQuery關於這個函式的文件，並且總結一下。演示程式碼如下： <div> <ul>

【前端】angularJS或者jquery實現按鈕點選變色，再點選變回來

目的：使按鈕在兩種狀態之間切換，注意：簡單的通過.修改focus和active的樣式是做不到的。效果圖： html程式碼： <div class="col-1">

【JavaScript】explode動畫

lte ctu 起點運動 max cnblogs pic 位置 raw 這是一個js實現的粒子聚合文字或圖片的動畫特效部分程序如下 n.container = n.container[0] || n.container; /*有且僅有一個cont

【轉】jquery cookie操作

訪問網站 blog cookie img jquer src dom 存儲購物 Cookie是網站設計者放置在客戶端的小文本文件。Cookie能為用戶提供很多的使得，例如購物網站存儲用戶曾經瀏覽過的產品列表，或者門戶網站記住用戶喜歡選擇瀏覽哪類新聞。在用戶允許的情況下，

【iOS】UIDynamicAnimator動畫

set translate logs enc ica cgpoint isp mat .cn 創建動畫 1 UIDynamicAnimator *animator = [[UIDynamicAnimator alloc] initWithReferenceView:sel

【轉】JQuery選擇器

log fieldset radi query 選擇器序號 html 數組 cnblogs 原址：http://www.cnblogs.com/onlys/articles/jQuery.html jQuery 的選擇器可謂之強大無比，這裏簡單地總結一下

【前端】JavaScript

sea 模仿嘗試 sub word number 封裝得到整數一、JavaScript概述　　1.JavaScript的歷史 1992年Nombas開發出C-minus-minus(C--)的嵌入式腳本語言(最初綁定在CEnvi軟件中).後將其改名Script

【前端】Vue.js經典開源項目匯總

查詢可見專業 codec ssa mark 高級 coffee init Vue.js經典開源項目匯總原文鏈接：http://www.cnblogs.com/huyong/p/6517949.html 　　Vue是什麽？　　Vue.js（讀音 /vju?/, 類似

【前端】vue.js實現按鈕的動態綁定

case ctype html 們的 ast pre cal 防止得到 vue.js實現按鈕的動態綁定實現效果：實現代碼以及註釋： <!DOCTYPE html> <html> <head> <title>按鈕

【前端】react學習階段總結，學習react、react-router與redux的這些事兒

行程 clas 目前 webpack body src 控制 return 體驗前言　　借用阮一峰的一句話：真正學會 React 是一個漫長的過程。這句話在我接觸react深入以後，更有感觸了。整個react體系都是全新的，最初做簡單的應用，僅僅使用react-to

【前端】前端筆試題 [1]

func 循環引用 object meid 內核 hresult 分別是存在 all 1. 請用div+css寫出文字水平垂直居中，圖片水平垂直居中的樣式及布局。2. 請用div+css寫出左側固定(width：200px)，右側自適應的頁面布

【前端】強大的javascript原生選擇器querySelector 和 querySelectorAll

它的 color 通過 tor size 便是進行 play tar querySelector 和 querySelectorAll 　　在傳統的 JavaScript 開發中，查找 DOM 往往是開發人員遇到的第一個頭疼的問題，原生的 JavaScript 所提供的

【前端】三個bug

1.5 nbsp 取數 -1 元素 spa asc 包括解決目錄一、Array對象的indexOf() 二、使用jquery，clone()下拉框問題三、jquery獲取獲取html5的data-*屬性一、Array對象的indexOf()

【前端】深入淺出Javascript中的數值轉換

在操作 scrip 入參 ava 原理過程 int() 字符串解析 p s 由於Javascript是一門弱類型的語言，在我們的代碼中無時無刻不在發生著類型轉換，所以了解Javascript中的類型轉換對於了解我們認識Javascript的運行原理至關重要。本文主要從數

【前端】jQuery動畫

相關推薦