图片褪色-在哪里调用.fadeIn和.fadeOut? [英] Fading images - Where to call .fadeIn and .fadeOut?

问题描述

曾经用这个打了我一会儿. 我是JavaScript和jQuery的新手. 经过大量的尝试和错误，我最终设法编写了一个函数来更改图像的src属性以创建幻灯片:

Been hitting my head a while with this one. I'm a total novice in JavaScript and jQuery. After a lot of trial and error I eventually managed to write a function to change the src attribute of an image to create a slideshow as such:

    $(function () {
            var slideshow = $("#img_slideshow");
            var images = [
            'img/slideshow1.jpg', 
            'img/slideshow2.jpg',
            'img/slideshow3.jpg'];
            var current = 0;

            function nextSlide() {
                slideshow.attr(
                'src',
                images[current = ++current % images.length]);

                setTimeout(nextSlide, 5000);
            }
            setTimeout(nextSlide, 5000);
        });

这非常有效，每5秒钟更改一次图像.我想要的是它们之间的淡入淡出过渡.我尝试在几个找到逻辑的地方调用.fadeIn和.fadeOut，例如setTimeout旁边(可能是错误的)，但没有任何效果. 有人可以帮忙吗?我很高兴对应该在何处进行简单的说明，可以帮助很多人.谢谢.

This works perfectly, changes the image every 5 seconds. What I wanted, was a fade transition between them. I tried calling .fadeIn and .fadeOut in several places I find logic, such as next to setTimeout (probably wrong) but nothing will work. Can anyone help? And I'd be grateful to have a simple explanation of where it should be called, could help a lot of folks out there. Thanks.

推荐答案

应该这样做(使用回调)-

It should be done like this (using the callbacks) -

function nextSlide() {
    slideshow.fadeOut(function() {
        $(this).attr('src',images[current = ++current % images.length]).fadeIn();
    });

    setTimeout(nextSlide, 5000);
}

这可以确保在淡出完成之前不会更改信号源.源发生变化，然后发生淡入.不过，这不会成为淡入淡出.

This insures that the source is not changed until the fade out is complete. The source changes and the fade in then happens. This will not be a cross-fade though.

这篇关于图片褪色-在哪里调用.fadeIn和.fadeOut?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！