Show hide div with animation

廉价感情. 提交于 2020-07-18 04:19:03

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!