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

Можно ли воспроизвести эффект масштабирования изображения с помощью анимации jQuery + background-position?

Что-то вроде этого: http://www.sohtanaka.com/web-design/examples/image-zoom/

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

Редактировать:

Идея состоит в том, чтобы использовать два изображения. Для Пример:

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

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

2 3
javascript css3 jquery animation jquery-effects

2 ответа:

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?

2

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

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

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

1