Home/ Questions/Q 8138889
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T11:38:50+00:00

I am new to Raphael and am trying to do something very simple, but

  • 0

I am new to Raphael and am trying to do something very simple, but failing miserably.

I am trying to replicate the animation at this link This is the code I have so far:

<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>

I have downloaded jquery and have it in the same folder as the Raphael. The code that isn’t working is the commented code talking about jquery adding the mouseover. When I add that code the rectangle doesn’t rotate anymore. It is just stationary. If someone can please help me with this animation I would appreciate it.

Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You have an error in your code:

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

    Change it to:

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

    That should correct your problem with jQuery.

    • 0