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的圖像淡入

回答

相關問題