添加动画以显示/隐藏javascript函数答案

【问题标题】：Adding animate to show/hide javascript function添加动画以显示/隐藏javascript函数
【发布时间】：2012-05-11 16:56:34
【问题描述】：

这是我编写的第一个 javascript 代码，我遇到了一些麻烦。我正在制作一个垂直菜单，它将显示链接 onclick 的附加信息，同时隐藏任何其他链接的内容。我想将 .animate 'slow' javascript 添加到函数中，但有一些困难。这就是我所拥有的：

<script type="text/javascript">
function reveal(id) {
   var e = document.getElementById(id);
   if(e.style.display== 'block')
e.style.display= 'none';
   else
e.style.display= 'block';
e.style.opacity= '1';
    }
 </script>

 <script type="text/javascript">
 function hide(id) {
   var e = document.getElementById(id);
   if(e.style.display== 'block')
e.style.display= 'none';
   else
e.style.display= 'none';
    }
 </script>

我尝试了很多方法来放置“动画”标签，但似乎无法获得它。衷心感谢您的帮助。

【问题讨论】：

您能否发布您的 HTML，如果可能的话，请发布一个 jsFiddle 来显示问题？
如果你想使用动画，你需要jQuery。没有原生 JS 叫 animate
点击这里切换元素#foo的可见性
这是 foo
点击这里切换元素#too的可见性
这也是
哦，我看过这篇文章：stackoverflow.com/questions/2960741/… 并尝试过，并让切换动画工作。我只是想将同样的视觉效果应用到我在那里制作的东西上
正如 mplungjan 指出的那样，动画（和隐藏）是 jQuery 函数。如果你想使用它们，你需要包含 jQuery，否则你必须自己编写等效的纯 JavaScript 函数。

标签： javascript animation hide show

【解决方案1】：

看着小提琴，似乎很混乱。我想出了一套更简洁的代码，你现在可以使用，但你还有很多东西要学。小提琴添加了http://jsfiddle.net/KMDjR/7/确保您调用jquery（在小提琴中它在左侧调用，但在您的页面中您需要自己调用它，如下面的代码所示）

<html>
<head>

<style>
#foo{
display: none;
}

#poo{
display: none;
}
</style>
<!-- calling jquery  -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('.toggleFoo').live('click', function() {
        $('#foo').fadeIn(1000);
        $('#poo').fadeOut(1000);
    });

    $('.togglePoo').live('click', function() {
        $('#poo').fadeIn(1000);
        $('#foo').fadeOut(1000);
    });

});
</script>
</head>
    <body>
        <a href="#" class="toggleFoo">Click here to toggle visibility of element #foo</a><br /><br />
        <div id="foo">This is foo</div>

        <a href="#" class="togglePoo">Click here to toggle visibility of element #poo</a><br /><br />
        <div id="poo">This is poo</div>
</body>
</html>

【讨论】：

感谢您的回复 Huangism，我知道我在编写代码方面当然还有很长的路要走（就像我说的，这是我用 javascript 或 jquery 编写的第一个代码）。不幸的是，这在我的网站上不起作用。可能有冲突hookahi.com/menu-test#
如果你从我提供的代码中复制核心，它应该做你想做的事，但你应该从基本的 javascript 开始并逐步提高。我也想要那个复选标记！
感谢您的回复。是的，我按照您的方式输入了代码，但是当我单击链接时没有得到任何响应。你看过我发布的链接吗？
你的意思是小提琴链接？是的，我看了，这真是一团糟，我将创建一个小提琴并将其附加到我的答案中
我的意思是这个 hookahi.com/menu-test# 它有测试页面。我不知道为什么它不起作用...