JS Image Transition Not Working

Question

Я не могу получить переход непрозрачности CSS к работе, добавив его с помощью JavaScript. Пожалуйста, дайте мне знать, что не так с кодом. http://jsfiddle.net/copperspeed/bvWbB

(function() { 
     var myImgs = document.getElementById('vz0'); 
     var i = 0; 

     function cycle() { 

      if (i <= 3) { 
       var myArray = [ 
        'http://jsrun.it/assets/t/r/U/O/trUOT.jpg', 
        'http://jsrun.it/assets/6/c/Y/s/6cYsH.jpg', 
        'http://jsrun.it/assets/w/M/r/i/wMriQ.jpg', 
        'http://jsrun.it/assets/5/Q/8/f/5Q8fW.jpg' 
       ]; 

       console.log(myArray[0]); 
       myImgs.setAttribute("src", myArray[i]); 

       if (myImgs.style.opacity === '0') { 
        console.log('trans'); 
        myImgs.style.transitionProperty = 'opacity'; 
        myImgs.style.transitionDuration = "1500ms"; 

       } 
       if (myImgs.style.opacity === '1') { 
        console.log('opacity-0'); 
        myImgs.style.opacity = '0'; 

       } 


       i++; 
       setTimeout(function() { 
        cycle(); 
       }, 3000); 

Answer 1

Есть несколько проблем с вашим скриптом.

1. Стиль непрозрачности не существует на элементе при инициализации. Вам необходимо учесть это в вашей логике
2. На втором проходе стиль непрозрачности существует и может быть равен 0, так что условие также необходимо учитывать для
3. Ваш второй оператор if немедленно отменяет то, что вы сделали в первый условный. Это утверждение должно быть в файле else-if
4. Вы перемещаете только один элемент изображения в/из, чтобы ваш переход от одного изображения к другому не работал должным образом. Вам нужно либо изменить на два элемента, либо изменить свою стратегию перехода для размещения одного элемента.

Demo fiddle - items 1-3 above

код изменен на 1-3 выше:

(function() { 
    var myImgs = document.getElementById('vz0'); 

    var i = 0; 

    function cycle() { 
     if (i <= 3) { 
      var myArray = ['http://jsrun.it/assets/t/r/U/O/trUOT.jpg', 'http://jsrun.it/assets/6/c/Y/s/6cYsH.jpg', 'http://jsrun.it/assets/w/M/r/i/wMriQ.jpg', 'http://jsrun.it/assets/5/Q/8/f/5Q8fW.jpg']; 

      myImgs.setAttribute("src", myArray[i]); 

      if (myImgs.style.opacity === '' || myImgs.style.opacity == 0) { 
       console.log(myImgs.style.opacity + '0'); 
       myImgs.style.transitionProperty = 'opacity'; 
       myImgs.style.transitionDuration = "1500ms"; 
       myImgs.style.opacity = 1; 
      } else if (myImgs.style.opacity == 1) { 
       console.log(myImgs.style.opacity + '2'); 
       myImgs.style.opacity = 0; 
      } 

      i++; 
      setTimeout(function() { 
       cycle(); 
      }, 3000); 
      if (i === 4) { 
       i = 0; 
      } 
     } 

    } 
    cycle(); 
}()); 

Для пункта # 4 выше - вот переработан версия, которая использует два Img элементы, чтобы помочь управлять переходом в и :

Demo fiddle for 1-4 above

HTML:

<div class="imgWrapper"> 
    <img src="http://jsrun.it/assets/t/r/U/O/trUOT.jpg" id="vz0" class="vzImage" alt="first" height="300" width="300" /> 
    <img src="http://jsrun.it/assets/t/r/U/O/trUOT.jpg" id="vz1" class="vzImage" alt="first" height="300" width="300" /> 
</div> 

CSS:

.imgWrapper { 
    position: relative; 
    height: 300px; 
    width: 300px; 
} 
.vzImage { 
    opacity:0; 
    position: absolute; 
    top: 0; left: 0; 
    bottom: 0; right: 0; 
} 

Сценарий:

(function() { 
    var myImgs = document.getElementsByClassName('vzImage'); 
    var myArray = ['http://jsrun.it/assets/t/r/U/O/trUOT.jpg', 
        'http://jsrun.it/assets/6/c/Y/s/6cYsH.jpg', 
        'http://jsrun.it/assets/w/M/r/i/wMriQ.jpg', 
        'http://jsrun.it/assets/5/Q/8/f/5Q8fW.jpg']; 

    // Consider moving this to .vsImage in stylesheet 
    for(var j = 0; j < myImgs.length; ++j) { 
     myImgs[j].style.transitionProperty = 'opacity'; 
     myImgs[j].style.transitionDuration = "1500ms"; 
    } 

    function cycle(i) { 
     var myArrayIdx = i % myArray.length; 
     var imgIdx  = i % myImgs.length; 
     var prevImgIdx = (i-1) % myImgs.length; 

     myImgs[imgIdx].setAttribute("src", myArray[myArrayIdx]); 
     myImgs[imgIdx].style.opacity = 1; 

     if(myImgs[prevImgIdx]) { 
      myImgs[prevImgIdx].style.opacity = 0; 
     } 

     setTimeout(function() { 
      cycle(i+1); 
     }, 3000); 
    } 
    cycle(0); 
}()); 

Answer 2

Первое правило отладки. Если что-то внутри оператора IF не происходит, посмотрите на условие. Вы проверяете, равен ли myImgs.style.opacity 0 или 1. Используйте console.log(myImgs.style.opacity);, и он покажет вам, что myImgs.style.opacity равно пустой строке. Поэтому ни одно из ваших условий не срабатывает.