jQuery - эффект увеличения изображения (эмуляция изменения размера браузера)

Question

Можно ли воспроизвести эффект, подобный увеличенному изображению, с помощью анимации jQuery + background-position?

примерно так: http://www.sohtanaka.com/web-design/examples/image-zoom/

Я имею в виду, вместо анимации размера изображения (что отстойбраузеры ужасно изменяют размеры изображений) - создайте анимацию, установив фоновое изображение для ссылки, и анимируйте положение и размер ссылки.

edit:

Идеяэто использовать два изображения.Например:

• два перекрывающихся изображения, одно 200 x 200 пикселей, другое 400 x 400 пикселей
• видно только 1-е изображение, 2-е изображение скрыто за 1-м,и изменяя размер до 200 x 200
• , пользователь наводит на него курсор, затем первое изображение увеличивается до 400 x 400 и одновременно исчезает
• второе изображение постепенно увеличивается и увеличивается до первоначального размера (400 x 400)

Можно ли это сделать с помощью jquery и как?

Answer 1

CSS

#div{
    background: url('http://images.epilogue.net/users/sirgerg/phoenix_nebula.jpg') top no-repeat;
    background-size: 10%;
    height: 490px;
    width: 490px;
}

JS

$('#div').hover(function (){
    $(this).animate({
        'background-size': '50%'
    })
}, function (){
    $(this).animate({
        'background-size': '10%'
    })
})

HTML

 <div id="div"></div>

Вкл. JSFIDDLE

ОПИСАНИЕ: работает только на последней версии Chrome

ССЫЛКА: Установить размер фонового изображения с помощью CSS?

Answer 2

Вы имеете в виду, как это

$('div').hover(function() {
    $(this).animate({
        width: 400,
        height: 400
    })
}, function() {
    $(this).animate({
        width: 200,
        height: 200
    })
})

Проверьте рабочий пример на http://jsfiddle.net/vm4wQ/