0

例如，我有一个名为showcontainer. 当我单击激活它的按钮时，我希望某个 div 元素，在这种情况下<div id="container">，淡入。当我再次单击它时，淡出。我如何实现这一目标？

注意：我不习惯 jQuery。

4

5 回答 5

2

所以你得到了一堆 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);
    }

};

检查工作演示。

于 2012-10-26T15:58:38.547 回答
1

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

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

function showcontainer() {
    $('#container').fadeIn();
}
于 2012-10-26T15:26:01.793 回答
1

如果您不反对使用 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 之后的代码将处理程序分配给按钮。

于 2012-10-26T15:32:00.430 回答
0

你可以看看jQuery UI Toggle。

该文档使该库的使用变得非常简单，并且有许多代码示例。

于 2012-10-26T15:24:46.667 回答
0

你最好学习 jQuery，因为它让做事变得更容易！

从它的声音来看，您可能已经在 HTML 中拥有容器 div，但样式为“display:none;”，然后使用 ( jQuery ) 在单击事件中简单地显示它：

$('#container').fadeIn('slow', function() {
    //Any additional logic after it's visible can go here
  });
于 2012-10-26T15:25:14.867 回答