1

我有一个正在构建的工作 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);
4

1 回答 1

3

对于fadeIn()图像，以display: noneor.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来自哪里。请记住，您还需要确保图像已完成加载，然后再尝试淡化它。

于 2012-04-23T05:16:31.443 回答