如何淡入和淡出的圖像只有一次在jQuery的

這是我的代碼如何淡入和淡出的圖像只有一次在jQuery的

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title></title> 
<style> 
#wrap{ 
    position:fixed; 
    z-index:-1; 
    top:0; 
    left:0; 
    background-color:black 
} 
#wrap img.bgfade{ 
    position:absolute; 
    top:0; 
    display:none; 
    width:100%; 
    height:100%; 
    z-index:-1 
} 
</style> 
</head> 

<body> 
<div id="wrap"> 
<img class="bgfade" src="images/s1.png"> 
<img class="bgfade" src="images/s2.png"> 
<img class="bgfade" src="images/s3.png"> 
<img class="bgfade" src="images/s4.png"> 
</div> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 
<script type="text/javascript"> 
$(window).load(function(){ 
    $('img.bgfade').hide(); 
    var dg_H = $(window).height(); 
    var dg_W = $(window).width(); 
    $('#wrap').css({'height':dg_H,'width':dg_W}); 
    function anim() { 
     $("#wrap img.bgfade").first().appendTo('#wrap').fadeOut(2000); 
     $("#wrap img").first().fadeIn(1000); 
      setTimeout(anim, 3000); 
          //setInterval(anim, 3000); 
    } 

    anim(); 
}); 
</script> 
</body> 
</html>

我想要做的煙霧動畫，我有4張圖片，4個煙霧圖像應該淡入和淡出，但只有一次。第四個圖像淡出後，動畫不應該再次出現。我已從此網站獲取此代碼http://demo.web3designs.com/jquery-animated-background-images-fade-in-out.htm。請幫助我們。

來源

2013-09-27 D J

可以共享HTML以及 –

不知道你在說什麼，但是..如果你想在加載函數中，然後在那裏調用它，並刪除setTimeout（我不知道爲什麼你使用setTimeout如果你不需要打電話它再次）。

$(window).load(function(){ 
    $('img.bgfade').hide(); 
    var dg_H = $(window).height(); 
    var dg_W = $(window).width(); 
    $('#wrap').css({'height':dg_H,'width':dg_W}); 

    anim(); 
}); 

function anim() { 
    $("#wrap img.bgfade").first().appendTo('#wrap').fadeOut(1500); 
    $("#wrap img").first().fadeIn(1000); 
}

來源

2013-09-27 07:09:19 bipen

嘗試

var $imgs = $("#wrap img"); 

function anim() { 
    var $current = $imgs.filter('.current').removeClass('current'), 
     $next = $current.next(); 
    $next = $next.length ? $next : $imgs.first(); 
    $next.addClass('current'); 

    $current.fadeOut(1500); 
    $next.fadeIn(1000); 
    if (!$imgs.last().is($next)) { 
     setTimeout(anim, 3000); 
    } 
} 
anim();

來源

2013-09-27 07:14:00

如何淡入和淡出的圖像只有一次在jQuery的

回答

相關問題