Запустите анимацию до показа изображения - PullRequest
Новая
       12

Запустите анимацию до показа изображения

0 голосов
/ 12 октября 2011

У меня есть лайтбокс, который я соединил, и изображение будет переходить в другое при нажатии на следующий / предыдущий.

У меня проблемы с анимацией ширины и высоты лайтбокса ДО появления изображения.

$('img#image').animate({ opacity: 0 }, 500)

$('img#image').attr('src', image).load(function () {

    var imgWidth = $('img#image').width();
    var imgHeight = $('img#image').height();

    $('#lightbox').animate({ 'width': imgWidth + 20 }, 500).delay(1000);
    $('#lightbox').animate({ 'height': imgHeight + 100 }, 500).delay(1000);
    $('#lightbox img#image').animate({ opacity: 1 }, 500);

});

Вверху я анимирую текущее изображение, чтобы оно исчезло, а затем заменяю его новым изображением.Затем я загружаю функцию, которая получает высоту и ширину изображения и анимирует высоту и ширину лайтбокса, чтобы она была больше, чем фактическое изображение.* Заранее спасибо.

1 Ответ

0 голосов
/ 12 октября 2011

Может сначала спрятать изображение, а затем изменить его размер, а затем показать: 

$('img#image').animate({ opacity: 0 }, 500)

$('img#image').hide();  // ADDED THIS LINE

$('img#image').attr('src', image).load(function () {

    var imgWidth = $('img#image').width();
    var imgHeight = $('img#image').height();

    $('#lightbox').animate({ 'width': imgWidth + 20 }, 500).delay(1000);
    $('#lightbox').animate({ 'height': imgHeight + 100 }, 500).delay(1000);

    $('img#image').show();  // ADDED THIS LINE

    $('#lightbox img#image').animate({ opacity: 1 }, 500);

});
...