webentwicklung-frage-antwort-db.com.de

Zeige div ausblenden mit Animation

Ich habe dieses Skript erstellt, das ein Div mit der richtigen Klasse öffnet und die anderen schließt.

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;
}

Ist es möglich, Animationen wie Fadout zu erstellen, anstatt sie nur durch Anzeigeoptionen anzuzeigen?

javascriptanimationhtmlshow-hide
7
user1632298

Sie könnten es versuchen

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;
}

Schauen Sie sich diese Geige an " http://jsfiddle.net/9jtd3/ "

Es gibt viele weitere Techniken, die von der Jquery-Bibliothek bereitgestellt werden. Sie sollten sich auch das ansehen.

7
yogi

Wenn Sie Jquery verwenden, können Sie dies auch tun

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

Angenommen, "verborgen" als Klassenname in Ihrer Gruppe von Divs

Viel Glück.

1
Saju

Dies wird sicherlich Ihr Problem lösen.

Sie können .fadeOut () direkt verwenden, wenn Sie die jQuery-Bibliothek in Ihr Skript aufgenommen haben.

1
imVJ

Sie können slideDown() and slidUp() von jQuery verwenden

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

Sie können dies mit einer Bibliothek wie jQuery oder etwas tun.

Sie können es sicher mit einfachem Javascript erstellen, aber es macht keinen Sinn, da jQuery eine erstaunliche Bibliothek ist.

Sehen Sie einige Beispiele von show und hide

0
Felipe Fonseca

Dies ist nur mit CSS einfacher.

Du machst eine Klasse

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

.hidden {
 display:none;
}

Und mit Javascript wenden Sie die ausgeblendete Klasse an oder entfernen sie, wenn Sie möchten. jQuery animation lib ist weit davon entfernt, gut verwendet zu werden. Es ist klobig, und der Benutzer frisst Ressourcen. CSS arbeitet stattdessen mit Ihrer GPU und ermöglicht eine flüssigere Animation.

0
codedude