javascript - 使用 Jquery 动画切换可见性

Question

我使用以下代码切换我的 Div，但无法弄清楚是否以及如何对其进行动画处理。任何帮助，将不胜感激。

链接:

<a href="#" onclick="toggle_visibility('example'); return false;"></a>

脚本:

<script>

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

Answer 1

您标记了jquery但我没有看到任何。在纯 JS 中，要实现这一点会遇到很多麻烦。

尝试使用toggle() :

function toggle_visibility(id) {
    $("#" + id).toggle('slow');
}

此外，我建议您更好地使用 jQuery:

<a href="#" data-toggle="example"></a>

上面的代码使用 data attribute与事件绑定(bind)相结合可以使您的代码更加清晰:

$(document).ready(function()
{
    $('a[data-toggle]').on("click", function()
    {
        toggle_visibility($(this).data("toggle"));
    }
});

现在，所有带有 data-toggle 的链接都具有相同的行为。