Question

我的jquery slidshow @ http://www.willruppelglass.com/（下）我遇到了一些麻烦

正如你可以看到fadein和fadeout图像正常工作，图像来自服务器，我为每个图像设置高度为200。我遇到的问题是，淡出后的图像仍在显示，我可以看到它们。我想要做的是当图像淡出时不显示它，但当它淡入时，显示它。这可能吗？

function slideSwitch() {
var $active = $('#slideshow IMG.active');

if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

var $next =  $active.next().length ? $active.next()
    : $('#slideshow IMG:first');


$active.addClass('last-active');

$next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('active last-active');
    });
}

$(function() {
    setInterval( "slideSwitch()", 6500 );   
});

#slideshow {
    position:relative;
    height:200px;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}

<div id="slideshow">

<img src="upload/<?php echo $array['image'] ?>" height="200" class="active" />

<img src="upload/<?php echo $array['image2'] ?>" height="200" />

<img src="upload/<?php echo $array['image3'] ?>" height="200" />

</div>

任何帮助都将不胜感激。

Answer 1

您应该添加动画代码以淡出活动图像，以便过渡更顺畅。如果你同时运行所有动画，你将不得不调整时间以保持平稳;我不知道为什么会这样，但这就是我将持续时间改为2000毫秒的原因。

我测试了下面的代码，它看起来像这样顺利运行。但是我想建议你重构你的代码，这样你只剩下1个动画功能。您还应该调整用于幻灯片放映的图像的大小（图像为5兆字节是严重的过度杀伤）。

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next(): $('#slideshow IMG:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 2000, function() {
        $active.removeClass('active last-active');
    });

    $active.animate({opacity: 0}, 2000);
}

如果你真的只想在节目动画完成后隐藏图像，你可以使用下面的代码，但这对我来说真的不是很顺利，你选择的当然。

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next(): $('#slideshow IMG:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 2000, function() {
        $active.removeClass('active last-active');
        $active.css({opacity: 0.0});
    });
}

Answer 2

Helmus是对的，你的图像太大了 - 第一次有人访问网站时，它会在图像被下载之前逐渐消失2次。对于大小相当的图像，30kb很大，更不用说5megs了。您可能也想要预加载图像 - 这个使用起来非常简单 - https://github.com/desandro/imagesloaded。

不确定你希望它们如何对齐，但如果css无法完成，你也可以使用jquery来做到这一点。

Answer 3

然后不要将fadeOut应用于要从视图中移除的图像，只需hide()即可。

Answer 4

你有没有理由使用.animate（）而不是内置的.fadeOut（）和.fadeIn（）jQuery函数？

Jquery fadein fadeout幻灯片无法正常工作

4 个答案: