rotor.js includes the function
flipPic(), which will swap out element2 and put element1 in its place when used this way:
The first two parameters can be any valid CSS selector. For example if you wanted to remove the image with id
firstImg and put the image with id
secondImg there, you would call flipPic like this:
The flipPic function can be called with no parameters and it will default to trying to remove the first child of the element with id
rotor and swap in the next child. More can be learned by looking at the code.
The index.html in this project implements Rotor and its default element swapping behavior can be seen when clicking the button.
Rotor requires jQuery, and by default uses that library's fadeIn() and fadeOut() methods, but that behavior can be overridden by passing in different comparable methods like toggle() in flipPic's 5th and 6th parameters. (The 3rd and 4th parameters allow the default parent and child selectors to be overridden; if you want to skip any parameters in the flipPic function then just pass them 'undefined' or null).