Rotate Text Links using jQuery
Text link ads are a very popular way of monetizing any website. Text link ads are simple links which, upon clicking, will take you to the sponsor’s website. One of the nice feature of text link ads is rotation of the links with smooth animation. In this post, we’ll look at out how to implement rotating text links using jQuery.
HTML Markup
In the HTML, define 3 different anchor tag links. All the anchor tag elements have a CSS class called “links”, which is a dummy class used for selecting these elements using the jQuery CSS class selector.
jQuery Code
Next, we’ll need to use JavaScript setInterval(). The setInterval() method calls a function or evaluates an expression at specified intervals (in milliseconds). You can follow this outline of the jQuery solution:
- Create an array variable and select all the anchor elements that have CSS class “links”.
Hide all the anchor links, except the first one. - Create 2 global variables nTotal and nPos. nTotal will store the array length and nPos will define the index of currently visible link.
- Create a function named RotateLinks().
This function will (you guessed it!) rotate the links. The setInteval() method will call this function every 2 seconds. In the function, first slowly fade out the currently visible link. An index of currently visible links is available in the nPos variable, use the eq() method to select that item from the array. Increase the value of the nPos variable by 1 as we need to make the next link visible. You’ll want to ensure that the nPos value does not exceed nTotal. When nTotal and nPos are equal, which means the last link is visible, you’ll want to start the rotation from the first link again by setting the nPos value to 0. Lastly, set the next visible link to fade-in.
Here is the complete jQuery code.
$(document).ready(function() {
var $anch = $("a.links");
$anch.hide().eq(0).show();
var nTotal = $anch.length;
var nPos = 0;
setInterval(RotateLinks, 2000);
function RotateLinks() {
$anch.eq(nPos).fadeOut("slow", function() {
nPos++;
if (nPos == nTotal) {
nPos = 0;
}
$anch.eq(nPos).fadeIn("slow")
});
}
});
You can check out the demo here.
An important thing to note is that a callback function must be defined with the fadeOut method. This callback is fired once the animation is complete, and is crucial because if we simply fade out and fade in an overlapping of animation will occur. You can check out the issue yourself by modifying the code like this:
function RotateLinks() {
$anch.eq(nPos).fadeOut("slow");
nPos++;
if (nPos == nTotal)
nPos = 0;
$anch.eq(nPos).fadeIn("slow");
}
The call-back function works like a charm. However, if you wish to have more control over the link transitions, you can use the Cycle plugin. This plugin will accomplish this task in just one line of code. To use the Cycle plug-in, you’ll need to wrap all the anchor tag elements inside a container.
Like:
In jQuery, simply call the cycle() function on the wrapper. Like this:
$(document).ready(function() {
$('#Links').cycle();
})
You can check out the demo here!
The default transition time is 4 seconds, but you can override this by setting the timeout option. Like so:
$(document).ready(function() {
$('#Links').cycle({
timeout : 3000
});
})
Please visit this link to learn more about the supported operations.
Conclusion
To sum it up, we saw how to rotate text links using jQuery code and the jQuery Cycle plugin. The plain jQuery code uses simple jQuery techniques to rotate the links. You can also control the rotation speed by updating the setInterval() duration. The cycle plugin provides more options to control the link transitions, if you are looking for increased management. Enjoy!
