不断淡入淡出

Question

我有这个 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>

Answer 1

既然你已经标记了 jQuery，你可以将它简化为：

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

和

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

或如用户指出的那样：邦迪

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

Answer 2

如果你想让它继续淡入淡出..你可以试试这样的：

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

See working example in Fiddle

然后，此函数将对您传递给它的任何 jquery 对象起作用。因此，如果您有其他事情想做同样的事情，您可以将其称为 keepFading($("#someOtherEle"));

为此，您需要确保包含 jquery。然后，您可以将上面的代码放在 html 的底部......或者如果您使用 $(document).ready( ... ) 包装，则放在您的脑海中

Answer 3

你可以在纯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;
     }
 }

Answer 4

这是一个FIDDLE

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

Answer 5

也可以使用 jQuery 进行淡入淡出切换。在此处查看详细信息：

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

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

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