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

或用户指出：Bondye

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

使用jQuery也可以使用fadeToggle。详情请见：

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

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

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

Answer 4

您可以在纯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 5

这是 FIDDLE

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

不断淡出和淡出

5 个答案: