3

それらの間の白い転送なしで画像をフェードしたいと思います。

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);
});

これは機能しますが、変更の間に白いフェードがあります。Images 配列には画像ソースが含まれます。私はこれを見つけましたhttp://jsfiddle.net/byB6L/が、それで動作するようにコードを更新できません。

4

4 に答える 4

4

これはあなたにアイデアを与えるはずです：

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>

于 2013-02-20T08:28:02.330 に答える
2

これは、アニメーション終了コールバックで同じ画像を使用しているためです。

私の提案：コンテナで使用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>
于 2013-02-20T08:25:28.480 に答える
0

1 つの画像をフェードアウトしてから別の画像をフェードインする代わりに、2 つの画像要素を使用してそれらを重ね合わせてから、上の画像をフェードアウトして、代わりに下の画像を表示します。

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/

于 2013-02-20T08:25:06.243 に答える
0

JQuery は、背景色のアニメーションのような背景画像のアニメーションをサポートしていません (追加のプラグインを使用する必要もあります)。したがって、アニメーションを行うには、間違いなく 2 つの画像が必要です。

于 2013-02-20T08:28:27.947 に答える