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

Question

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/ но я не могу обновить свой код, чтобы работать с этим.

895 4

jQuery image fade

4 ответов:

Comments

Ничего не найдено.

udidu · Accepted Answer · 2013-02-20 10:25:28

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

Мое предложение: используйте 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>

Roko C. Buljan · Accepted Answer · 2017-01-18 02:04:44

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

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>

Guffa · Accepted Answer · 2013-02-20 10:25:06

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

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/

Ryxle · Accepted Answer · 2013-02-20 10:28:27

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