JQuery анимация различной ширины IMG

Question

Я долго искал ответ безрезультатно, поэтому пришло время спросить.Я пытаюсь использовать .animate(), чтобы изменить размер изображения после нажатия.Первым состоянием изображения будет размер миниатюры, который будет анимирован до исходного размера изображения, а затем снова уменьшенного изображения.

edit: изображения загружаются с шириной 150px по умолчанию.

проблема в том, что не все изображения имеют одинаковый «оригинальный» размер, поэтому мне нужен способ указать одной универсальной функции переключиться на исходный размер текущего изображения.

Это мой текущий код, который загружается в $ (окно) .load:

$('img[class=resize]').click(function (){
        if ($(this).width() != 150)
        {
            $(this).animate({width: '150px'}, 400);
        }
        else
        {
            $(this).animate({width: ''}, 400);
        }
    });

Теперь это явно не работает так, как я хочу, потому что .animate() думает, когда я говорю width: '' Я хочу сделать ширину = 0. Любые предложения, как ядолжен идти об этом?

Answer 1

Вот идея: когда вы пишете изображение на страницу, добавляете класс или какой-либо другой атрибут, который является исходной шириной изображения, затем, когда вы анимируете его обратно к его первоначальному размеру, попробуйте $(this).animate({width: $(this).attr('original_size_attribute_of_your_choosing')}, 400);

tl, dr: сохранить исходный размер в атрибуте каждого изображения.