Show hide div with animation

问题

I made this script, which opens a div with the right class and close the others.

function showhide(id) {
    if (document.getElementById) {
        var divid = document.getElementById(id);
        var divs = document.getElementsByClassName("hideable");
        for (var i = 0; i < divs.length; i = i + 1) {
            divs[i].style.display = "none";
        }
        divid.style.display = "block";
    }
    return false;
}

Is it possible to make some animation, like fadout, easeout instead of just showing it by display options?

回答1:

You could try this

function showhide(id) {
  if (document.getElementById) {
    var divid = document.getElementById(id);
    var divs = document.getElementsByClassName("hideable");
    for (var i = 0; i < divs.length; i = i + 1) {
      $(divs[i]).fadeOut("slow");
    }
    $(divid).fadeIn("slow");
  }
  return false;
}

Have a look at this fiddle "http://jsfiddle.net/9jtd3/"

There are many more techniques provided by Jquery library, You should have a look at that too.

回答2:

You can use slideDown() and slidUp() of jQuery

$( document.body ).click(function () {
  if ( $( "div:first" ).is( ":hidden" ) ) {
    $( "div" ).slideDown( "slow" );
  } else {
    $( "div" ).slideUp("slow");
  }
});

回答3:

This will surely solve your problem.

You can use .fadeOut() directly if you have included jQuery library in your script.

回答4:

If You are using Jquery then another way to do this is

function showhide(id) {
  $(".hideable".fadeOut("slow");
  $("#" + id).fadeIn("slow");
}

Assuming "hideable" as className in your group of divs

Good luck.

回答5:

You can do that using a Library like jQuery or something.

You can sure make it using plain javascript, but there's no point doing that since jQuery is an amazing library.

See some examples of show and hide

回答6:

This is way easier with only CSS.

You make a class

div {
 display:block;
 transition: all .2s ease-out;
}

.hidden {
 display:none;
}

And with javascript, you apply or remove the class hidden when you want to. jQuery animation lib is wayyyy far from good to be used. It's clunky, and ressource eating for your user. CSS works with your GPU instead, allowing a more fluid animation.

来源：https://stackoverflow.com/questions/14335501/show-hide-div-with-animation

标签

javascript

animation

html

show-hide