Question

我有一个放在一起的灯箱，当点击下一个/上一个时，它会将图像淡入另一个。

我遇到的问题是，在图像出现之前动画灯箱的宽度和高度。

$('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);

});

在顶部，我动画当前图像，使其淡出，然后用新图像替换它。然后我加载一个获取图像高度和宽度的函数，并设置灯箱的高度和宽度，使其大于实际图像。

任何帮助都会非常有用。

提前致谢。

Answer 1

首先隐藏图像然后调整大小然后显示：

$('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);

});

在图像显示之前运行动画

1 个答案: