jQuery выцветание двух изображений без белого цвета



Я хотел бы выцветить изображение без переноса белого между ними.

HTML:

<div class="image">
  <span><img src="1.jpg"></span>
</div>

JQuery:

$('.image > span > img').fadeOut(1000, function() {
  $('.image > span > img').attr('src', images[i]);
  $(this).fadeIn(1000);
});

Это работает, но есть белое выцветание между изменениями. Массив изображений содержит источники изображений. Я нашел это http://jsfiddle.net/byB6L/ но я не могу обновить свой код, чтобы работать с этим.

4   3  

4 ответов:

Это связано с тем, что вы используете одно и то же изображение в конце обратного вызова анимации.

Мое предложение: используйте position: relative; на контейнере class="image", Поместите элемент изображения как position:absolute;, Теперь после того, как вы затеняете изображение, вставьте новое изображение в контейнер и затените его и удалите первое изображение.

Пример:

Html:

<div class="image">
  <span><img src="1.jpg"></span>
</div>

Css:

<style type="text/css">
    .image{position:relative;}
    .image span img{position:absolute;top:0;left:0;}
</style>

JavaScript:

<script type="text/javascript">
    $('.image > span > img').fadeOut(1000);
    var $image = $('<img alt="" src="YOUR NEW IMAGE_PATH" style="opacity:0;" />');
    $('.image > span').append($image);
    $image.fadeIn(1000, function(){
        $('.image > span > img').first().remove();
    });
</script>

Это должно дать вам идею:

var c = 0,                  // Counter index
    $img = $('.image img'), // Get images
    n = $img.length;        // How many images?

$img.eq(c).show();          // Show c one

(function loop() {          // Recursive infinite loop
    $img.delay(1000).fadeOut(800).eq(++c%n).fadeIn(800, loop);
}()); 
.image{
  position:relative;
}
.image img{
  position:absolute;
  top:0px; 
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image">
  <img src="http://placehold.it/300x150/bf0?text=Apples" alt="" />
  <img src="http://placehold.it/300x150/0bf?text=and" alt="" />
  <img src="http://placehold.it/300x150/fb0?text=Pears" alt="" />
</div>

Вместо того, чтобы выцветать в одном изображении, а затем исчезать в другом, используйте два элемента изображения и наложите их друг на друга, а затем просто выцветите верхний, чтобы вместо него появился нижний.

CSS:

.image img { position: absolute; left: 0; top: 0; }

HTML:

<div class="image">
  <img class="bottomImage" src="http://placekitten.com/100/100"/>
  <img class="topImage" src="http://placekitten.com/g/100/100"/>
</div>

Javascript:

$('.topImage').fadeOut(3000);

Демо: http://jsfiddle.net/Guffa/grTUK/

JQuery не поддерживает фоновую анимацию изображений, такую как цветовая анимация фона(которая также должна использовать дополнительный плагин). Поэтому, чтобы сделать вашу анимацию, определенно вам нужно иметь два изображения.

Comments

    No results found.