Question

我有一小段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')，但我不知道如何以及在何处插入该部分。

Answer 1

使用Jquery可能非常简单

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

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

Answer 2

试试这个。

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

Answer 3

使用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>

Answer 4

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

show：$（'＃id'）。show（“slow”）
隐藏：$（'＃id'）。hide（“慢”）

Answer 5

如果你需要没有JQuery的纯Javascript，你可以使用CSS3不透明度而不是显示：block / none：

e.style.opacity = '0';

在js中，在css中：

.this-element{
  -webkit-transition: opacity .5s ease;
  -moz-transition: opacity .5s ease;
  -ms-transition: opacity .5s ease;
  -o-transition: opacity .5s ease;
  transition: opacity .5s ease;
}

使用.fadeout（'slow'）进行CSS显示功能

5 个答案: