使用 Jquery 动画切换可见性

Question

I am toggling my Div's with the following code, but cant figure out if and how to animate it. Any help would be appreciated.

The link:

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

The script:

<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

You tagged jquery but I don't see any. In pure JS you'll have too much trouble for achieving this.

Try using toggle() :

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

Besides, I would suggest you a better use of jQuery:

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

The code above is using a data attribute which combinated with event binding could make you code much clearer:

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

Now all your links with data-toggle have the same behaviour.

Answer 2

rolling with DontVoteMeDown's pattern:

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

or

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

or

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

For more complex animations you can use easing as well. http://easings.net/ .animate( properties [, duration ] [, easing ] [, complete ] )

Answer 3

If you want to it you can use JQuery and do the following

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

More documentation on .slideToggle() can be found here: http://api.jquery.com/slidetoggle/