Максимальная ширина анимации на img [JQuery]

Question

Я пытался найти решение, но не могу найти ничего хорошего.

Я настраиваю блог для своего друга.Когда он загружается, я хочу, чтобы все img в каждом посте имели максимальную ширину и максимальную высоту 150 пикселей.Когда пользователь нажимает IMG, максимальные значения должны увеличиться до 500 пикселей, что достаточно просто.Проблема с моим кодом в том, что я не могу получить анимацию, которую я хочу.Любая помощь там?

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

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

Answer 1

Я получил его, скомбинировав два других ответа (и удалив max-width и max-height в css-коде)

Answer 2

вместо использования .css(), попробуйте использовать .animate()

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

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

Answer 3

$(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'); 
    }); 
});

Answer 4

Поскольку вы уже используете класс CSS, вы можете использовать метод toggleClass - добавляет указанный класс, если он отсутствует, и удаляет указанный класс, если он присутствует, используя необязательный переход.

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

Смотрите демо здесь - http://jqueryui.com/demos/toggleClass/