Skip to main content

jQuery Simulate RSS Feedburner Image Shake

By Sam Deering

JavaScript

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

shake-it

Ok so I wanted to animate my new subscribe to RSS image (It’s basically a can with an RSS symbol on it but i like it!). I thought i’d make it shake when the page loads for a few seconds and then when the mouse hovers it.

To achieve this I used a plugin called jRumble and simulated click events using the timeout/ function to simulate the shake.

So, I basically downloaded the plugin, referenced it and included this simple jQuery snippet into my header file in WordPress.

jQuery Snippet to Simulate Shake







jQuery(document).ready(function($) {
	//shake for 3 seconds after page loads
    $('#rss-feedburner-image').jrumble({rumbleEvent: 'click'});
    $('#rss-feedburner-image').trigger('click');    
    setTimeout(function(){
        $('#rss-feedburner-image').trigger('click');
        $('#rss-feedburner-image').unbind('click')
    }, 3000);
	//then shake on mouse hover
	$('#rss-feedburner-image').jrumble({
		rumbleEvent: 'hover'
	});
});

HTML



Demo

Simply refresh the page and look at the can at the top! Then mouse over it! Then click on the can and subscribe to our RSS feed! ;-)

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

New books out now!

Get practical advice to start your career in programming!


Master complex transitions, transformations and animations in CSS!

Latest Remote Jobs