Изображение анимированное изменение размера и размытия с помощью jquery

Question

У меня есть изображение, которое я хочу изменить после загрузки страницы, чтобы она соответствовала своему родителю (возможно, с использованием небольшой анимации), а затем размыть. Любые советы?

Спасибо!

L

Answer 1

var img = $('.anImage'),
    offset = img.offset();

// position image absolutely in the same position to allow it to expand
img.css({
       position: "absolute",
       top: offset.top,
       left: offset.left,
       zIndex: 100
   })
   // animate expansion
   .animate({
       top: 0,
       left: 0,
       width: img.parent().width(),
       height: img.parent().height()
   }, "fast")
   // fadeout
   .fadeOut("fast");

Единственное требование - оставить родительский элемент с position: relative.