使用.fadeout('slow')作为CSS显示函数

Using .fadeout('slow') for CSS display function

本文关键字:CSS 显示 函数 作为 fadeout 使用 slow      更新时间:2023-09-26

我有一小段JavaScript代码:

function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }

当目标ID设置为style.display = 'none';时,我试图添加淡出效果,但我不知道如何添加。我知道我必须使用.fadeOut('slow'),但我不知道如何以及在哪里插入该部分。

使用Jquery,它可能是非常简单的

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

function toggle_visibility(id) {
    $( "#"+id).fadeToggle( "slow", "linear" );
}

这可以使用jQuery的.fadeOut()函数轻松完成。您也可以输入毫秒,而不是"慢速"或"快速"。例如,如果您需要半秒钟,您可以输入500

$('button').click(function(){
   $('h1').fadeOut('slow');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button>Click me</button>
<h1>Click the button and I'll be gone :(</h1>

您可以使用jQuery.show((和jQuery.Hide((

  • show:$('#id'(.show("慢速"(
  • hide:$('#id'(.hide("慢速"(

试试这个。

 function toggle_visibility(id) {
   // since you are using jQuery you don't need to use `getElementById`.
   $('#'.id).fadeOut('slow');
}