Question

我目前有一个适用于以下页面的脚本：

效果很好并且做了我想要的，但是在每次过渡之间我都有轻微的延迟，现在我想做的就是让图像淡化现有的图像而不是淡出原始图像。然后消失。

我尝试过多次移动东西，似乎无法解决这个问题！我知道这是一个快速的，我在这里的脚本运作得很好。所以，就像有人帮我解决这个问题一直困扰着我好几天！

我错过了这么简单的东西，却看不到它......任何帮助都将不胜感激。

<script type="text/javascript">
    $(document).ready(function () {

        var $backgroundimages = ['http://www.universitycompare.com/wp-content/themes/blue-and-grey/images/ads/aru/front-page-ad.jpg', 'http://www.universitycompare.com/wp-content/themes/blue-and-grey/images/ads/uniofbuckingham/front-page-ad.jpg', 'http://www.universitycompare.com/wp-content/themes/blue-and-grey/images/ads/middlesex/front-page-ad.jpg', 'http://www.universitycompare.com/wp-content/themes/blue-and-grey/images/home-page-slide.jpg', 'http://www.universitycompare.com/wp-content/themes/blue-and-grey/images/TCE-New.jpg'];
        var $backgroundcount = 0;

        function fade($ele) {
            $ele.css('background-image', 'url('+$backgroundimages[$backgroundcount]+')');
            $backgroundcount++;
            $ele.fadeIn(1000).delay(4000).fadeOut(1000, function () {
                if ($backgroundcount >= $backgroundimages.length) {
                    $backgroundcount = 0;
                };
                fade($ele);
            });
        };

        fade($('#stretchParent  .HomeImage').first());
    });
</script>

Answer 1

我认为你想要.fadeIn（1000）.fadeOut（1000）.delay（4000）所以输入/输出淡入淡出同时发生。

此外，您需要多个元素，以便一次显示两个图像。我会使用绝对位于彼此之上的多个标签。然后旋转它们，逐渐淡出，等等。

回应cHao的评论 - 你需要预先缓存它们并希望优化它们 - 它们对我的加载速度非常慢。

更新：这是一个有效的例子：

http://jsfiddle.net/DhESu/

jQuery(function($){
    $('.rotator').each(function(){
        console.log('start rotation');
        imgs = $(this).find('img');
        idx = 0;
        rotate = null;
        rotate = function(){
            $(imgs[idx]).fadeOut();
            idx++;
            if (idx >= imgs.length) {
                idx = 0;
            }
            console.log('show idx ' + idx);
            $(imgs[idx]).fadeIn();
            setTimeout(rotate, 2000);
        }
        setTimeout(rotate, 2000);
    });
});

欢迎你。

图像同时淡入

1 个答案: