Достижение эффекта затенения изображения

Question

Я пытаюсь построить перекрестный эффект замирания изображения на

1. Ввод выбранного изображения на передней панели (позиция: -9999 до 0)
2. Положив предыдущее изображение на задняя (позиция: 0 до -9999)
3. Увеличение его непрозрачность до тех пор, пока не достигнет 1
4. Настройка непрозрачности предыдущего изображения на 0 (так что я могу повторить proccess)

Это код:

<a-sky id="pano-1" src="image1" class="pano" opacity="0" position="-9999"></a-sky> 
    <a-sky id="pano-2" src="image2" class="pano" opacity="0" position="-9999"></a-sky> 

    var opacity = 0 // starting opacity 
    var step = 0.1 // step size 
    var target = 1 // target value 
    var time = 50 // delay in milliseconds 
    // start timer loop, and record it's index 

    var increaseOpacity = setInterval(function() { 
    // assuming your selector works, set opacity 
    // increment opacity by step size 
    opacity = (opacity * 10 + step * 10)/10 
    // if we reached our target value, stop the timer 
    if (opacity > target) { 
     clearInterval(increaseOpacity) 
    } 

    }, time) 

    $(`#pano-${index}`).attr('position', 0) 
    $('.pano').not(`#pano-${index}`).attr('position', -9999) 
    $('.pano').not(`#pano-${index}`).attr('opacity', 0) 

Изображения исчезают, но без пересечения друг с другом (например, это старое изображение> белое> новое изображение).

Возможно, у меня есть неправильный порядок? Что делать, чтобы заархивировать этот эффект?

Answer 1

Вы позиционируете другие элементы до завершения замирания. переместить их так: -

var opacity = 0 // starting opacity 
    var step = 0.1 // step size 
    var target = 1 // target value 
    var time = 50 // delay in milliseconds 
    // start timer loop, and record it's index 

    var increaseOpacity = setInterval(function() { 
    // assuming your selector works, set opacity 
    // increment opacity by step size 
    opacity = (opacity * 10 + step * 10)/10 
    // if we reached our target value, stop the timer 
    if (opacity > target) { 
     clearInterval(increaseOpacity) 
     $('.pano').not(`#pano-${index}`).attr('position', -9999) 
     $('.pano').not(`#pano-${index}`).attr('opacity', 0) 
    } 

    }, time) 

    $(`#pano-${index}`).attr('position', 0) 

Единственный вопрос, который я мог видеть, в настоящее время является z-index один, но попробовать это первое.

Answer 2

Я думаю, что такие задачи должны быть максимально простыми, например, , всегда используйте css, где вы можете! Javascript следует использовать только для бизнес-логики.

function SliderCtrl($) { 
 
    var self = this; 
 
    
 
    self.slider = $('#slider'); 
 
    self.imgs = $('img', self.slider); 
 
    self.current = null; 
 
    self.ACTIVE_CLASS = 'is-active'; 
 
    self.TIMING = 2000; 
 
    
 
    self.changeSlide = function() { 
 
    var current = $(self.current); 
 
    var next = current.next().length ? current.next() : self.imgs.first(); 
 
    console.log(next, current) 
 
    
 
     
 
    current.removeClass(self.ACTIVE_CLASS); 
 
    next.addClass(self.ACTIVE_CLASS); 
 
    self.current = next; 
 
    }; 
 
    
 
    window.setInterval(self.changeSlide, self.TIMING); 
 
    self.slider.removeClass('is-waiting'); 
 
} 
 
$(document).ready(SliderCtrl);

#slider { 
 
    width: 300px; 
 
    height: 100px; 
 
    overflow: hidden; 
 
    margin: 0 auto; 
 
    opacity: 1; 
 
    position: relative; 
 
    
 
    transition: 400ms all linear; 
 
} 
 

 
#slider img { 
 
    width: 100%; 
 
    height: auto; 
 
    
 
    transition: 400ms all linear; 
 
    opacity: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
#slider img.is-active { 
 
    opacity: 1; 
 
} 
 

 
#slider.is-waiting { 
 
    opacity: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="slider" class="is-waiting"> 
 
    <img src="http://static1.squarespace.com/static/53c46660e4b07557fac2eb85/t/550ee40ce4b02547ba9c325e/1427039245866/doug-rickard_a-new-american-picture_west-gallery-6-b1.jpg?format=1500w" /> 
 
    <img src="http://artandyou.ru/upload/mce/image/kerek/vs/portrait/doug-rickard_a-new-american-picture_east-gallery-6-b.jpg" /> 
 
    <img src="http://www.yossimilo.com/artists/chris-mccaw/images/full-chris_mccaw-marking_time-west_gallery-13.jpg" /> 
 
</div>