2012-06-25 187 views
2

我是新來的拉斐爾,我正在嘗試做一些非常簡單的事情,但很失敗。拉斐爾動畫

我想在this link這個複製的動畫是我到目前爲止的代碼:

<html> 
<head><title></title> 
<script src="raphael-min.js"></script> 
<script src=" src="jquery-1.7.2.js"></script> 
</head> 

<body> 

<div id="draw-here-raphael" style="height: 200px; width: 400px; background: #666;"> 
</div> 

<script type="text/javascript"> 
//all your javascript goes here 

var r = new Raphael("draw-here-raphael", 400, 200), 

    // Store where the box is 
    position = 'left', 

    // Make our pink rectangle 
    rect = r.rect(20, 20, 50, 50).attr({"fill": "#fbb"}); 

// Note JQuery is adding the mouseover. SVG == html nodes 
$(rect.node).mouseover(function() { 
    if (position === 'left') { 
    rect.animate({x: 300, y: 100}, 400, "<>"); 
    position = 'right'; 
    } else { 
    rect.animate({x: 20, y: 20 }, 800, "bounce"); 
    position = 'left'; 
    } 
}); 
// Make that sucker rotate 
setInterval(function() { 
    rect.rotate(1); 
}, 10); 

</script> 

</body> 
</html> 

我已經下載了jQuery和有它在同一文件夾中的拉斐爾。不工作的代碼是關於jQuery添加鼠標懸停的評論代碼。當我添加該代碼矩形不再旋轉。它只是靜止的。如果有人可以請這個動畫幫助我,我將不勝感激。

感謝

+2

您是否看到以下錯誤信息:

回答

4

你在代碼中有一個錯誤:

<script src=" src="jquery-1.7.2.js"></script> 

將其更改爲:

<script src="jquery-1.7.2.js"></script> 

這應該糾正與jQuery你的問題。

+0

啊,是的,謝謝,現在動畫正在運行,但它不會到達底部頁面的右側,它會向左或向下移動並消失任何想法? –