jQuery - Resize image effect with easing plugin

Question

I'm looking to simulate effect as on http://www.templatemonster.com/flash-templates/27545.html (when you try to hover over the thumbnails).

Im using jQuery and easing plugin, and this is what i have so far: http://jsfiddle.net/RtYMV/

JS:

$(document).ready(function() {
    $('.line a').hover(
        function() {
            $(this).find('img').stop().animate({
                width: '88px',
                height: '88px',
                top: '6px',
                left: '6px',
                easing: 'easeInBounce'}, 111);
        },
        function() {
            $(this).find('img').stop().animate({
                width: '100px',
                height: '100px',
                top: '0',
                left: '0',
                easing: 'easeOutBounce'}, 111);
    });
});

But obviously I have problem with running easing plugin.

Answer 1

The .animate() function can receive both individual parameters for each option or two object maps parameter, the first for indicating the css properties and the second for the rest of properties, so, your code should be like this:

$(document).ready(function() {
    $('.line a').hover(
        function() {
            $(this).find('img').stop().animate({
                width: '88px',
                height: '88px',
                top: '6px',
                left: '6px'},
                {easing: 'easeInBounce',duration: 111});
        },
        function() {
            $(this).find('img').stop().animate({
                width: '100px',
                height: '100px',
                top: '0',
                left: '0'},
                {easing: 'easeOutBounce',duration: 111});
    });
});

Also, you didn't include the jquery easing plugin in your jsfiddle (do it in "Manage Resources" section of sidebar).

See working demo