javascript - Jquery 动画不透明度和其他元素的边距

Question

我有一个链接，单击该链接时必须显示另外 2 个链接。但是当我点击我的链接时，没有任何反应。真的没什么。

我在编写脚本之前已经加载了 jquery。

这是我的 jquery 脚本:

   $("#imd").toggle(function(){
    $("#anw").animate({opacity:1},200);
    $("#3d").animate({marginTop:75}, 200);
},function(){
    $("#anw").animate({opacity:0},200);
    $("#3d").animate({marginTop:0}, 200);
});

这是我的 CSS:

#anw {
    width: 50%;
    background-color: #0f0;
    opacity: 0;
}

这是我的 HTML 标记

<div class="mid">
    <h1><a href="#anw" id="imd">Interactive Media Design</a></h1>

    <div id="anw"><br><a class="left" href="website.html">Apps</a><a class="right" href="website.html">Websites</a></div>

    <hr> 

    <h1 id="3d"><a href="#">3D Modelling</h1>

</div>

<div class="bottom">
    <h1><a href="3dsmax.html">Contact and about me</a></h1>
</div>

如果这是一个非常愚蠢的问题，我深表歉意，但我不知道。而且我能找到的文档也不能满足我的需求。

Answer 1

您需要使用click 处理程序:

$("#imd").click(function(){
    $("#anw").toggle(function(){
        $(this).animate({opacity:1},200);
    }, function() {
         $(this).animate({opacity:0},200);   
    });
    $("#3d").toggle(function() {
        $(this).animate({marginTop:75}, 200);
    },function() {
        $(this).animate({marginTop:0}, 200);
    })
});

参见 fiddle :https://jsfiddle.net/8Lpvty1w/