JSTween庫破壞

JSTween庫似乎沒有從庫的教程中執行一個簡單的動畫。使用以下代碼，警報框將在分配的1秒時間後顯示，但不會發生動畫。JSTween庫破壞

我一定設置了錯誤庫，但我看不到問題。

<html> 
<head> 

<style type="text/css"> 
#box 
{ 
    width: 16px; 
    height: 16px; 
} 
</style> 

<script type="text/javascript" src="jquery-1.10.1.js"></script> 
<script type="text/javascript" src="jstween-1.1.js" ></script> 
<script type="text/javascript" src="jstween-1.1.min.js" ></script> 

<script type="text/javascript"> 
function animate() 
{ 
    $('#box').tween({ 
     width:{ 
     start: 16, 
     stop: 200, 
     time: 0, 
     units: 'px', 
     duration: 1, 
     effect:'easeInOut', 
     onStop: function(){ alert('Done!'); } 
     } 
    }).play(); 
} 
</script> 
</head> 

<body> 

<div id="box"> 
<img src="image.png" onClick="animate()" /> 
</div> 

</body> 
</html>

附加信息：在10.7.5上使用Safari。代碼在Chrome或Firefox中都不起作用。

來源

2013-06-26 Adifex

嘗試記錄'$（'＃box'）。tween'，可以嗎？ – Cherniv

@Cherniv：如果你的意思是加入一個像這樣的的console.log： '功能動畫（）{ 的console.log（$（ '＃箱'）吐溫（{ 寬度：{ 啓動：16，停車：200，時間：0，單位： 'PX'，時間：1，效果： 'easeInOut' 的onStop：函數（）{警報（ '！完成'）;} } }）玩（））; }' 控制檯中的輸出是這樣的： [''

' – Adifex

對於任何可能在將來閱讀此內容的人，我發現了這個問題：CSS元素#box需要position: relative;作爲屬性，否則瀏覽器將默認保存該元素。

來源

2013-07-04 02:23:18 Adifex

回答

相關問題