Постоянно исчезает и исчезает

Question

У меня есть этот JavaScript, чтобы сделать div flash каждые две секунды. Мне было интересно, могу ли я добавить что-нибудь в эту текущую функцию, чтобы 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

Если вы хотите, чтобы продолжить замирания в и .. вы могли бы попробовать что-то вроде этого:

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

See working example in Fiddle

Этот функция будет работать на любом объекте jquery, который вы передаете. Поэтому, если у вас есть что-то еще, вы хотите сделать то же самое, вы можете просто называть его keepFading($("#someOtherEle"));

Для этого вам нужно убедиться, что включен jquery. Затем вы можете поместить код выше в нижней части HTML ... или в голове, если вы заключаете в $(document).ready(...)

Answer 2

Поскольку вы помечено JQuery, вы можете упростить его:

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

и

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

или как указал пользователь: Bondye

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

Answer 3

Также можно fadeToggle с JQuery. Подробнее здесь:

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

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

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

Answer 4

Вы можете реализовать fadeIn и fadeOut на чистом JavaScript:

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);