[jQ]Background-Position Animation Plugin 1.21

沒錯!只要 300 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!

background_position_animation_plugin_1_1

jQuery 的 animate 雖然能直接使用 CSS 的方式來進行動畫，但有些屬性其實是不支援的，例如：background-position。很多效果都能直接透過 background-position 的變化來產生，所以就有人把 animate 進行功能的擴充，讓它能支援 background-position 哩。

套件名稱：Background-Position Animation Plugin
套件版本：1.21
作者網站：http://www.protofunc.com/scripts/jquery/backgroundPosition/
套件網址：http://plugins.jquery.com/project/backgroundPosition-Effect
發佈日期：2009-10-22
檔案大小：2.06 KB
檔案下載：jquery.backgroundPosition.js

方法說明：

檢視原始碼 JavaScript

1 2	// 讓指定元素的背景能進行移動動畫 $(selector).animate({backgroundPosition: 'X Y'});

使用範例：

檢視原始碼 JavaScript

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.backgroundPosition.js"></script>
<script type="text/javascript">
	$(function(){
		// 先初始化 #background 的樣式
		$('#background').css({
			width: '500px',
			height: '500px',
			background: 'url(monkey.gif) no-repeat 120px 0'
		}).click(function(){
			$(this).animate({
				backgroundPosition: '400px 50px'
			}).animate({
				backgroundPosition: '100px 250px'
			}).animate({
				backgroundPosition: '20px 90px'
			}).animate({
				backgroundPosition: '120px 0'
			}); 
		});
	});
</script>
 
<body>
	<div id="background">
		點我!! Click Me!!
	</div>
</body>