Course lectures : 1 of 1

Flashing text with jQuery

5th November 2011

jquery flashing textflashing textjavascript flashing text

Sometimes you might need to bring your visitors attention to some particular text or phrase, and the most obvious way of doing it is by using some flashing / animating effect.

In this tutorial I will show you how to create a flashing text effect with JavaScript and a small portion of jQuery.

First create a new text element on your page - it might be a paragraph, heading, span or anything you wish - I'll use the h1 tag:

<h1 class="flash">Flashing text tutorial</h1>

Make sure that your element has some class assigned to it so that it is easily identifiable on the page - I used the class flash.

Now in your javascript file create a new object called textObject:

var textObject = {

};

Our new object will have three properties named:

  • delay : represents the delay between transitions
  • effect : defines the effect used : replace / colour
  • classColour : class name that contains the colour for the colour effect
delay : 300,
effect : 'replace',
classColour : 'blue',

Next we create our first method called flash. Please note that I will be using JavaScript's strict mode "use strict"; and where necessary I'll declare the variable self to point to the parent textObject object.

flash : function(identity, effect, delay) {

    "use strict";

    var self = this;

    $(identity).each(function() {

        effect = effect || self.effect;
        delay = delay || self.delay;
        self.flashExe($(this), effect, delay);

    });

}

Our flash method takes three parameters, out of which only first one is required:

  • identity : represents the identifier of the object to which we want to bind the effect
  • effect : the chosen effect to be applied to the object - by default value assigned to the effect property will be used
  • delay : the delay between transitions - by default value assigned to the effect property will be used

We use jQuery's each method to loop through all of the elements on the page. Inside of the loop we check whether the effect parameter passed to the method has any value - and if not we assign the default one. The same applies to the delay parameter.

On the next line we are calling the flashExe method passing all filtered parameters.

Now we need to create another method called flashExe:

flashExe : function(obj, effect, delay) {

    "use strict";

    var self = this;

    setTimeout(function() {

        switch(effect) {

            case 'replace':
                obj.toggle();
                break;

            case 'colour':
                obj.toggleClass(self.classColour);
                break;

        }

        self.flashExe(obj, effect, delay);

    }, delay);

}

This method takes the filtered parameters and uses them accordingly to perform the animation.

On the first line we create a new variable called flash and assign the setTimeout() function to it.

The setTimeout() function takes two parameters - first one, which is the function we want to execute after the certain time - represented by the second parameter.

The function we will execute after the number of milliseconds defined by the delay parameter uses the switch statement with the value assigned to the effect parameter as argument. If the value is replace then we simply toggle the visibility of the object by using jQuery's toggle() method, otherwise we toggle the class name assigned to the classColour property of the textObject by using the jQuery's toggleClass() method.

The last line (after the switch statement) simply calls the parent method again creating a repetitive effect.

Your entire object should now look like this:

var textObject = {

    delay : 300,
    effect : 'replace',
    classColour : 'blue',

    flash : function(identity, effect, delay) {

        "use strict";

        var self = this;

        $(identity).each(function() {

            effect = effect || self.effect;
            delay = delay || self.delay;
            self.flashExe($(this), effect, delay);

        });

    },

    flashExe : function(obj, effect, delay) {

        "use strict";

        var self = this;

        setTimeout(function() {

            switch(effect) {

                case 'replace':
                    obj.toggle();
                    break;

                case 'colour':
                    obj.toggleClass(self.classColour);
                    break;

            }

            self.flashExe(obj, effect, delay);

        }, delay);

    }

};

Now, that our object is completed, the last thing we need to do is to call the relevant method when the document is ready like so:

$(function() {

	textObject.flash('.flash');

});

The above will use the default effect and default delay, if you wish to use the changing colour effect simply add the colour keyword as second parameter:

textObject.flash('.flash', 'colour');

Or to change the delay to say 700 milliseconds add the third parameter:

textObject.flash('.flash', 'colour', 700);

The same with the default effect (replace):

textObject.flash('.flash', '', 700);

COMMENTS

If you'd like to include code example please wrap your code within <pre><code> tags. See example here


<pre>
<code>
function fullName(firstName, lastName)
{
    return firstName + ' ' + lastName;
}
</code>
</pre>