Hover effect using Javascript

http://codecanyon.net/item/jfade-jquery-hover-effect/full_screen_preview/124433

In this website, when you hover over one image, the rest images will have a decreased opacity. This is very effective in drawing people’s attention to this particular image.

In order to do this, we first need to copy paste the following javascript into the head section of the html file.

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js&#8221; type=”text/javascript”></script>

<script type=’text/javascript’ src=’js/jfade.js’></script>

This step is to link the html file to one particular javascript file called jfade.js.

Also in the html file, the following code is needed in the body:

$().ready(function() {
$(‘.jfade_image’).jfade();
$(‘.portfolio’).jfade({
start_opacity: “.4”,
high_opacity: “1”,
low_opacity: “.2”,
timing: “500”
});
$(‘.button’).jfade({
start_opacity: “1”,
high_opacity: “1”,
low_opacity: “.4”,
timing: “500”
});
$(‘.text’).jfade({
start_opacity: “1”,
high_opacity: “1”,
low_opacity: “.7”,
timing: “500”
});
$(‘.links’).jfade({
start_opacity: “.9”,
high_opacity: “1”,
low_opacity: “.2”,
timing: “500”
});
});

And in the jfade.js file, the code is as follows:

$(function($) {
$.fn.jfade = function(settings) {

var defaults = {
start_opacity: “1”,
high_opacity: “1”,
low_opacity: “.5”,
timing: “500”
};
var settings = $.extend(defaults, settings);
settings.element = $(this);

//set opacity to start
$(settings.element).css(“opacity”,settings.start_opacity);
//mouse over
$(settings.element).hover(

//mouse in
function () {
$(this).stop().animate({opacity: settings.high_opacity}, settings.timing); //100% opacity for hovered object
$(this).siblings().stop().animate({opacity: settings.low_opacity}, settings.timing); //dimmed opacity for other objects
},

//mouse out
function () {
$(this).stop().animate({opacity: settings.start_opacity}, settings.timing); //return hovered object to start opacity
$(this).siblings().stop().animate({opacity: settings.start_opacity}, settings.timing); // return other objects to start opacity
}
);
return this;
}

})(jQuery);

The last step is to add a class to each image you the effect to apply. Here the class is called jfade_image. And the name should be consistent in the html file and the js file.

Advertisements

One response to “Hover effect using Javascript

  1. I agree – the hover effect really makes the image stand out. The coding seems so confusing, though! I hope we’ll take time to practice this in class so that we all can finally figure out the hover effect.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s