Question

这是我写的第一个javascript代码，我遇到了一些麻烦。我正在制作一个垂直菜单，该菜单将显示链接onclick的其他信息，同时还隐藏任何其他链接的内容。我想将.animate'慢'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>

我已尝试过多种方法来放置“animate”标签，但似乎无法获得它。真诚地感谢您的帮助。

Answer 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>

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

1 个答案: