I have tried looking for a solution, but can't find anything good.

I am customizing a blog for a friend of mine. When it loads, I want all the img's in each post to have a max-width and max-height of 150px. When the user pushes the img, the max-values should increase to 500px, which is easy enough. The problem with my code is that I can't get an animation on it, which I want. Any help out there?

var cssObj = {'max-width' : '500px','max-height' : '500px;'}

$("img").click(function(){     
    $(this).css(cssObj); 
}); 

I have tried looking for a solution, but can't find anything good.

I am customizing a blog for a friend of mine. When it loads, I want all the img's in each post to have a max-width and max-height of 150px. When the user pushes the img, the max-values should increase to 500px, which is easy enough. The problem with my code is that I can't get an animation on it, which I want. Any help out there?

var cssObj = {'max-width' : '500px','max-height' : '500px;'}

$("img").click(function(){     
    $(this).css(cssObj); 
}); 

• javascript
• jquery
• image
• animation
• resize

4 Answers 4

I got it working, bining two of the other answers (and removing max-width & max-height in the css-code)

var cssBegin = {'max-width' : '250px','max-height' : '250px;'};       
$('img').css(cssBegin);     
var cssObj = {'max-width' : '500px','max-height' : '500px;'};
 $("img").click(function(){          $(this).animate(cssObj,'slow');  });  

instead of using .css(), try using .animate()

var cssObj = {'max-width' : '500px','max-height' : '500px;'}

$("img").click(function(){     
    $(this).animate(cssObj,'slow'); 
}); 

$(document).ready(function()
{
    // define sizes
    var cssBegin = { width: 150, height: 150 };
    var cssMax   = { width: 500, height: 500 };

    // init images with the small size
    $('img').css(cssBegin);

    // init click event on all images
    $("img").click(function(){ 
        $(this).animate(cssMax, 'fast'); 
    }); 
});

Since you are already using CSS class, you can use toggleClass method - Adds the specified class if it is not present, and removes the specified class if it is present, using an optional transition.

$("img").click(function() {
        $(this).toggleClass( "cssObj", 1000 );
        return false;
    });

See the demo here - http://jqueryui./demos/toggleClass/