Selectors, Animation, and AJAX – jQuery Tutorial

Image Effect on Hover We have an image, and we would like the image to have a nice effect when hovered. We want the image to have 80% opacity by default, and when the user mouses over the image we want to change the opacity to 100% over a certain amount of time. This can be used to for a nice effect on image galleries or ad banners. he code below accomplishes our task.

$('.hover_image img').css('opacity', 0.8).hover(function(){ $(this).stop().animate({opacity: 1}, 500); }, function(){ $(this).stop().animate({opacity: 0.8}, 500); });

Above, we change the default opacity to 80%. We then set an event for when the user mouses over and out of the image, changing the CSS accordingly. Be sure to check out the animate demo we have setup to see all of the examples in action! Simple AJAX For the last part of our article, lets see how simple AJAX calls can be with jQuery. For our example, we will have an external HTML file with some content that we want to display. We only want to load this file and display it’s content when the user clicks on a certain link, thereby decreasing our initial page load. It is as simple as using the .load method, which automatically uses a GET AJAX request by default. Lets look at how we would do this.

$('p.load_it a').click(function(){ $('#demo_content').load('external_file.html'); return false; });