連續淡入和淡出

我有這個JavaScript讓div每兩秒閃一次。我想知道如果我可以添加任何東西到這個當前的功能，這樣的div淡入和淡出，而不是出現和消失，沒有過渡。連續淡入和淡出

的JavaScript

<script language = "javascript"> 
     function flash() 
     { 
      var blinker = 2000 
      var timeIn = setInterval(function() { 
       var element = document.getElementById('sign'); 
       element.style.visibility = (element.style.visibility == 'hidden' ? '' : 'hidden'); 
      }, blinker);   
     } 
    </script>

HTML DIV

<div class = "sign" id = "sign"> 

    <p> hello </p> 

</div>

來源

2013-12-11 user3087015

如果你想讓它繼續淡入淡出..你可以嘗試這樣的事：

function keepFading($obj) { 
    $obj.fadeToggle(2000, function() { 
     keepFading($obj) 
    }); 
} 
keepFading($("#sign"));

See working example in Fiddle

這函數然後可以在你傳遞它的任何jquery對象上工作。所以，如果你有其他的東西你想要做同樣的事情，你可以稱它爲keepFading($("#someOtherEle"));

爲了這個工作，你需要確保包含jquery。然後，您可以把上面的代碼放在HTML的底部...或者在你的頭上，如果你在一個$(document).ready(...)

來源

2013-12-11 13:27:56 smerny

在哪裏以及如何使用「$（document）.ready（...）」？在使用jQuery之前，我從未在 – user3087015

@ user3087015之前使用JQuery，在''內使用它。如果你把它放在你的''中，它會看起來像這樣：http://jsfiddle.net/FxPDj/3/ – smerny

你真棒謝謝 – user3087015

既然你已經標記了jQuery，您可以將其簡化爲：

$('#sign').fadeIn(2000); // fade-in in 2 seconds

和

$('#sign').fadeOut(2000); // fade-out in 2 seconds

或由用戶指出：Bondye

function flash() { 
    $('#sign').fadeToggle(2000); 
}

來源

2013-12-11 13:19:55 techfoobar

如果你不想檢查它是否隱藏或顯示，你可以使用'fadeToggle（）'：HTTP： //api.jquery.com/fadeToggle/ –

@Bondye - 是的。通過使用fadeToggle（）可以進一步簡化它。 – techfoobar

這是否意味着我必須更改JQuery的JavaScript標記才能正常工作？ – user3087015

它也可以fadeToggle與jQuery。查看詳情這裏：

http://api.jquery.com/fadeToggle/

<script> 
    function flash(id) { 
     $('#'+id).fadeToggle(); 
    } 

    var blinker = 2000; 
    var timeIn = setInterval(function() { 
     flash('sign'); 
    }, blinker); 
</script>

來源

2013-12-11 13:21:53 user2968356

當你提供一個答案時，請避免只粘貼一個答案鏈接，這可能是一個評論...嘗試改善你的答案與示例或解釋代碼 – DaniP

您可以在純JavaScript實現fadeIn和fadeOut包裝：

function fadeOut(id,val){ 
    if(isNaN(val)){ 
     val = 9; 
    } 
    document.getElementById(id).style.opacity='0.'+val; 

    //For IE 
    document.getElementById(id).style.filter='alpha(opacity='+val+'0)'; 
    if(val>0){ 
     val–; 
     setTimeout('fadeOut("'+id+'",'+val+')',90); 
    }else{ 
     return; 
    } 
} 

function fadeIn(id,val){ 
    // ID of the element to fade, Fade value[min value is 0] 
    if(isNaN(val)){ 
     val = 0; 
    } 

    document.getElementById(id).style.opacity='0.'+val; 
    //For IE 
    document.getElementById(id).style.filter='alpha(opacity='+val+'0)'; 

    if(val<9){ 
     val++; 
     setTimeout('fadeIn("'+id+'",'+val+')',90); 
    }else{ 
     return; 
    } 
}

來源

2013-12-11 13:29:07 fortegente

這正是我所希望的。非常感謝fortegente。 – user3087015

它拋出一個錯誤。瀏覽器似乎不喜歡9中的if（val <9） – user3087015

這裏有一個FIDDLE

setInterval(function() { 
    $('.sign').animate({ opacity: '0' }, 800).animate({ opacity: '1' }, 800); 
}, 2000);

來源

2013-12-11 13:34:36 mdesdev

連續淡入和淡出

回答

相關問題