Question

我用拇指和主要照片做了一个画廊，这是代码：

.click(function () {
    $('span.arrow').remove();  
    $('#frtitle').html($(this).find("img").attr('title'));
    $('#desc').html($(this).find("img").attr('alt'));         
    $(this).append('<span class="arrow"></span>');
    $('#slideshow-main li').removeClass('active').animate({opacity: 0.0}, 1000);        
    $('#slideshow-main li.' + $(this).attr('rel')).addClass('active').animate({opacity: 1.0}, 1000);    
    return false;
});

但是fadein和out不能很好地显示背景和fadeout fast

您可以查看主图库here。

Answer 1

我看起来fadeIn在fadeOut完成之前就开始了。

您可以将回调函数传递给animate() - 函数。当动画完成时，它会被调用：）

$('#slideshow-main li').removeClass('active').animate({opacity: 0.0}, 1000, function() {        
    $('#slideshow-main li.' + $(this).attr('rel')).addClass('active').animate({opacity: 1.0}, 1000);
});

Answer 2

在我看来，这些图像甚至都没有淡出。图像似乎立即消失在白色背景中，然后下一个图像逐渐淡入。我猜你在删除display: none类时设置了visibility: hidden或active。

我认为你正在寻找的是更接近这一点（除了Stefan Fandler所提到的），在更改active类属性或稍后分配之后：

$('#slideshow-main li').animate({opacity: 0.0}, 1000);

......然后没有图像在课堂上消失。

另一个选择是使用CSS3 transitions来更改不透明度。有点像：

transition: opacity 1.5s linear;      
-webkit-transition: opacity 1.5s linear;  
-moz-transition: opacity 1.5s linear;  
-o-transition: opacity 1.5s linear;  
-ms-transition: opacity 1.5s linear;

此选项不需要使用JavaScript来淡入淡出。

这个画廊的Fadein Fadeout

2 个答案: