Question

例如，我有一个名为showcontainer的函数。当我点击激活它的按钮时，我希望某个div元素（在本例中为<div id="container">）淡入。当我再次单击它时，淡出。我如何实现这一目标？

注意：我不习惯使用jQuery。

Answer 1

所以你得到了一堆jQuery答案。没关系，我倾向于使用jQuery来做这种事情。但是在纯JavaScript中这样做并不难，它只是更冗长：

var container = document.getElementById('container');
var btn = document.getElementById('showcontainer');

btn.onclick = function() {

    // Fade out
    if(container.style.display != 'none') {
      var fade = setInterval(function(){
        var opacity = parseFloat(container.style.opacity);
        opacity = isNaN(opacity) ? 100 : parseInt(opacity * 100, 10);
        opacity -= 5;
        container.style.opacity = opacity/100;
        if(opacity <= 0) {
          clearInterval(fade);
          container.style.opacity = 0;
          container.style.display = 'none';
        }
      }, 50);

    // Fade in
    } else {
      container.style.display = 'block';
      container.style.opacity = 0;
      var fade = setInterval(function(){
        var opacity = parseFloat(container.style.opacity);
        opacity = isNaN(opacity) ? 100 : parseInt(opacity * 100, 10);
        opacity += 5;
        container.style.opacity = opacity/100;
        if(opacity >= 100) {
          clearInterval(fade);
          container.style.opacity = 1;
        }
      }, 50);
    }

};

检查working demo。

Answer 2

你能做的最好的事情就是从现在开始，习惯jQuery。

页面http://api.jquery.com/fadeIn/包含可在此处编写的所有示例代码。基本上你想在showcontainer函数中调用fadeIn。

function showcontainer() {
    $('#container').fadeIn();
}

Answer 3

如果您不反对使用jQuery本身，您可以轻松实现这一目标：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $('#showcontainer').click(function() {
            $('#container').fadeToggle();
        });
    });
</script>
...
<div id="container">
...
</div>
...

<input type="button" id="showcontainer" value="Show/hide"/>
...

请注意jQuery源代码中缺少的http:。借助此技巧，浏览器将根据原始网页是否安全自动使用http:或https:。

包含jQuery之后的代码片段将处理程序分配给按钮。

Answer 4

您可以查看jQuery UI Toggle。

该文档非常简单地使用了库，它们有很多代码示例。

Answer 5

你也可以学习jQuery，因为它可以让你更容易做事！

根据它的声音，您可以在HTML中使用容器div，但样式为“display：none;”，然后使用（jQuery）在您的点击事件中显示它：< / p>

$('#container').fadeIn('slow', function() {
    //Any additional logic after it's visible can go here
  });

使用javascript显示/隐藏<div> </div>

5 个答案: