jquery image fade in

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 происходит от , Помните, что вам также необходимо убедиться, что изображение закончило загрузку, прежде чем пытаться ее угасать.