jquery - 此画廊的淡入淡出

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;
});

但是淡入淡出效果不好，它会快速显示背景和淡出

你可以看看这里的主画廊。

Answer 1

在我看来，图像甚至不会淡出。图像似乎立即消失为白色背景，然后下一个图像逐渐淡入。我猜你正在设置display: none或visibility: hidden删除active课程。

active我认为在更改类属性或稍后分配它之后，您正在寻找的是更接近此的东西（除了 Stefan Fandler 提到的） ：

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

...然后不会让图像在课堂上消失。

另一种选择是使用CSS3 过渡来更改不透明度。类似于以下内容：

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 来淡入和淡出。

Answer 2

我看起来在 fadeOut 完成之前开始淡入淡出。

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

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