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

$(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);

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

Answer 3

如果你想动画，你可以使用JQuery并执行以下操作

function toggle_visibility(id) {
   var e = document.getElementById(id);
   e.slideToggle('fast');
}

有关.slideToggle()的更多文档，请访问：http://api.jquery.com/slidetoggle/

使用Jquery动画切换可见性

3 个答案: