jQuery的图像淡入

我有一个工作jquery图像旋转木马，我正在建设。它大部分完成（只是增加按钮的作品）：http://jsfiddle.net/2C8fy/7/jQuery的图像淡入

我唯一的问题是，当图像被追加它不会淡入。它刚刚出现。我尝试在右侧添加另一个不透明度为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);

来源

2012-04-23 Digital Brent

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

来源

2012-04-23 05:16:31 jfriend00

jQuery的图像淡入

回答

相关问题