2012-06-25 4 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

А, да, спасибо. Теперь анимация работает, но она не идет в ногу справа от страницы. Он уйдет влево или на дно и исчезнет. –

Смежные вопросы