各機能内でアニメーションを繰り返す

Question

イメージを1つ1つずつ表示してアニメーション化しています。最後の画像が表示された後、fx 6秒の短いポーズの後にすべての画像を再度表示したいと思います。

は、アイブ氏は、setTimeoutメソッドとの組み合わせを試してみましたが、私は何かが欠けする必要があります - 使用してコードイムをここにある： は、私はいくつかの変更で私の質問を解決するために管理答えとしてUPDATED

var viewport_height = $(window).height() - 100; 
$('section#slide_art').css({ 'height' : viewport_height }); 

$('img.img_slide_this').each(function(slide_this) { 
    var get_img_height = $(this).height(); 
    $(this).css({ 'width' : '0', 'margin-left' : '50%', 'height' : get_img_height, 'max-height' : viewport_height }); 

    $(this).delay(3000 * slide_this).animate({ 'opacity': '1', 'margin-left' : '0', 'width' : '100%' }, 700, 'swing') 
     .delay(1500).animate({ 'height' : get_img_height, 'width' : '0', 'margin-left' : '50%'}, 700, 'swing').fadeOut();   
}); 

- イムケース他での投稿は、興味を持っているかもしれません：

function run_slider() { 

     var viewport_height = $(window).height() - 100; 
     $('section#slide_art').css({ 'height' : viewport_height }); 

     $('img.img_slide_this').each(function(slide_this) {   
      var get_img_height = $(this).height(); 
      $(this).css({ 'width' : '0', 'margin-left' : '50%', 'height' : get_img_height, 'max-height' : viewport_height }); 

      $(this).delay(3000 * slide_this).animate({ 'opacity': '1', 'margin-left' : '0', 'width' : '100%' }, 700, 'swing') 
       .delay(1500).animate({ 'height' : get_img_height, 'width' : '0', 'margin-left' : '50%'}, 700, 'swing');      
     }); 

     // 2 x images 
     // setTimeout(run_slider, 7500); 

     // 4 x images 
     setTimeout(run_slider, 15000); 

     // 8 x images 
     // setTimeout(run_slider, 30000); 

} 

run_slider(); 

Answer 1

画像のリストが変更されていない場合、あなたが望むものを整理するための最良の方法は、単一の画像をアニメーション化する関数であってもよいです、コールバック内の次のアニメーションをトリガーします。ここでは例です：

var viewport_height = $(window).height() - 100; 
    $('section#slide_art').css({ 'height' : viewport_height }); 

    var images = $('img.img_slide_this'); 
    var animateImage = function(index) { 
     if (index > images.length) { return; } 
     var image = $(images.get(index)); 
     var get_img_height = image.height(); 
     image.css({ 'width' : '0', 'margin-left' : '50%', 'height' : get_img_height, 'max-height' : viewport_height }); 

     image.animate({ 'opacity': '1', 'margin-left' : '0', 'width' : '100%' }, 700, 'swing') 
      .delay(1500).animate({ 'height' : get_img_height, 'width' : '0', 'margin-left' : '50%'}, 700, 'swing') 
      .fadeOut(function() { 
       if (index < images.length - 1) { 
        animateImage(index + 1); 
       } else { 
        setTimeout(function() { 
         animateImate(0); 
        }, 6000) 
       } 
      });  
    }; 
    animateImage(0); 

お知らせコールバックはすぐにフェードアウトが行われているように次の画像をトリガ、または再び第1の画像をトリガし、次に待っているのいずれか、最後のフェードアウトに加えます。

最終的なアニメーションとフェードアウトが同時に実行されているかのように見えます。このように見えない場合は、フェードアウトではなく最後のアニメーションにコールバックを付けることができます。