jquery 图像淡入

Question

我正在构建一个可用的 jquery 图像轮播。基本完成了(只有增加按钮起作用):http://jsfiddle.net/2C8fy/7/

我面临的唯一问题是，当附加图像时，它不会淡入。它只是出现。我尝试在右侧添加另一个不透明度为 0 的插槽，然后将其设置为淡入动画，但这似乎也不起作用。如何为右侧插槽图像设置动画，使其看起来像是淡入的？这是我现在所拥有的:

$('#basic_div').animate({          //slides the div with the images in it to the left.
            left: '-=40px'
        }, 300, function() {

        });

        left.animate({             //fade out effect for the left most image
            opacity: 0
        }, 300, function() {
            left.remove();         //gets rid of left most image after it becomes invisible.
            $('#basic_div').css({
                left: '0px'        //resets the div that contains the images
            });
        });


            middle.attr('id', 'left_slot');       //changes ids
            right.attr('id', 'middle_slot');


            $("#basic_div").append(newImgSL);
            newImgSL.attr('id', 'right_slot');
            newImgSL.animate({
                opacity: 100   //I thought this would make it fade in, but it still just appears.
            }, 300);

Answer 1

致fadeIn()图像，以 display: none 开头或.hide()和opacity: 1 .

或者您可以将初始不透明度设置为 0 并使用 fadeTo(3000, 1) .

fadeIn()预计图像最初为 display: none将不透明度设置为最终的不透明度。然后它会记住最终的不透明度，将不透明度设置为 0，使图像可见，然后开始为不透明度设置动画。

fadeTo()只是从当前的不透明度开始并淡入新指定的不透明度。

因此，对于您的情况，您可以这样做:

// set id and initial opacity
newImgSL.attr('id', 'right_slot').css("opacity", 0);
// put it into the page
$("#basic_div").append(newImgSL);
// fade to visible
newImgSL.fadeTo(300, 1);    

另外，请记住，不透明度是一个从 0 到 1 的十进制数。

您的代码未显示 newImgSL 的位置来自。请记住，您还需要确保图像在尝试淡入淡出之前已完成加载。