使用 Jquery 动画切换可见性

Question

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

link:

<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，结合事件绑定可以让你的代码更清晰：

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

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

Answer 2

采用 DontVoteMeDown 的模式滚动：

function toggle_visibility(id) {
   $("#" + id).slideDown("slow"); /* replace this with any of the following */
}

或

$("#" + id).fadeIn(500);

或

$("#" + id).fadeOut(500);

或

$("#" + id).toggle(500);

对于更复杂的动画，您也可以使用缓动。 http://easings.net/ .animate( 属性 [ duration ] [ easing ] [ complete ] )

使用 Jquery 动画切换可见性

Animate toggle visibility with Jquery

javascript

jquery

toggle