拉斐尔动画答案

【问题标题】：Raphael animation拉斐尔动画
【发布时间】：2012-06-26 00:47:04
【问题描述】：

我是 Raphael 的新手，我正在尝试做一些非常简单的事情，但惨遭失败。

我正在尝试在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 并将它放在与 Raphael 相同的文件夹中。不起作用的代码是讨论 jquery 添加鼠标悬停的注释代码。当我添加该代码时，矩形不再旋转。它只是静止的。如果有人可以帮我制作这个动画，我将不胜感激。

谢谢

【问题讨论】：

你看到这里有问题吗：

标签： javascript animation raphael

【解决方案1】：

您的代码中有错误：

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

改成：

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

这应该可以解决您使用 jQuery 的问题。

【讨论】：

啊，是的。谢谢你。现在动画正在运行，但它不会转到页面的右下角。它会向左或底部移动并消失。有什么想法吗？