Ive been working on creating a swinging effect in javascript so that a number of objects, when the mouse moves over them will however and then slowly keep hovering until they stop.

I have got this working in JSFiddle: /

Here is the Js that I have:

(function(){

var box=document.getElementById('box');box2=document.getElementById('box2');box3=document.getElementById('box3');

swing(box);swing(box2);swing(box3);

function swing(box) {
  var ang  = 20,
   dAng = 10,
   ddAng = .5,
   dir  = 1;

function setAng(ang){
box.style.WebkitTransform =  'rotate('+ang+'deg)';
box.style.MozTransform =  'rotate('+ang+'deg)';
dir = -dir;
if (dAng > 1)
    dAng -= ddAng;

if (Math.abs(ang) > 0)
    setTimeout(setAng, 1000, dir * (Math.abs(ang)-dAng));
};

box.onmouseover = function(){    
box.style.WebkitTransform =  'rotate(-20deg)';
box.style.MozTransform =  'rotate(-20deg)';
setTimeout(function(){
    setAng(ang)
}, 1000);
}

};
}()) 

Also as a second question if anyone can answer this, the more boxes I add the jerkier and more rigid the swinging seems to be.

Appreciate all the help folks.

Ive been working on creating a swinging effect in javascript so that a number of objects, when the mouse moves over them will however and then slowly keep hovering until they stop.

I have got this working in JSFiddle: http://jsfiddle/z3s7v/58/

Here is the Js that I have:

(function(){

var box=document.getElementById('box');box2=document.getElementById('box2');box3=document.getElementById('box3');

swing(box);swing(box2);swing(box3);

function swing(box) {
  var ang  = 20,
   dAng = 10,
   ddAng = .5,
   dir  = 1;

function setAng(ang){
box.style.WebkitTransform =  'rotate('+ang+'deg)';
box.style.MozTransform =  'rotate('+ang+'deg)';
dir = -dir;
if (dAng > 1)
    dAng -= ddAng;

if (Math.abs(ang) > 0)
    setTimeout(setAng, 1000, dir * (Math.abs(ang)-dAng));
};

box.onmouseover = function(){    
box.style.WebkitTransform =  'rotate(-20deg)';
box.style.MozTransform =  'rotate(-20deg)';
setTimeout(function(){
    setAng(ang)
}, 1000);
}

};
}()) 

Also as a second question if anyone can answer this, the more boxes I add the jerkier and more rigid the swinging seems to be.

Appreciate all the help folks.

• javascript
• jquery
• css

Share Improve this question Follow edited Mar 31, 2014 at 11:31 Andrew Thompson 169k4141 gold badges222222 silver badges436436 bronze badges asked Mar 31, 2014 at 9:40 MarkPMarkP 2,56655 gold badges3232 silver badges4848 bronze badges 4

• 1 Why are you not using jQuery if you have it included and tagged? – René Roth Commented Mar 31, 2014 at 9:42
• Please choose the jQuery Lib from the left side menu in your fiddle. It works!!! – Think Different Commented Mar 31, 2014 at 9:42
• It works jsfiddle/z3s7v/59 – Pratik Joshi Commented Mar 31, 2014 at 9:43
• I have already said that it works on JSFiddle it. Doesnt work in a web page – MarkP Commented Mar 31, 2014 at 9:46

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Wrap code in

window.onload = function(){ 
    // your code 
};

The reason might be because you are trying to set the variable before the elements are loaded so the variable gets set to null. the way to fix this would be to go into your html file and replace this:

<script src="path/to/file.js" ></script>

with this

<script defer src="path/to/file.js" ></script>

so by adding the defer attribute, you tell the browser to execute you javasctipt after the page is loaded.

I know this is a little late but I found the solution so here you go.