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的来源。请记住，在尝试淡化图像之前，还需要确保图像已完成加载。

jquery图像淡入

1 个答案: