Hinzufügen animieren zum einblenden/ausblenden der javascript-Funktion

Dies ist die erste javascript-code, den ich geschrieben habe, und ich bin mit einigen Schwierigkeiten. Ich bin in den Prozess der Herstellung ein vertikales Menü zeigt zusätzliche Informationen für den link, onclick, während auch das verstecken der Inhalte von einem anderen link. Ich möchte hinzufügen das .animieren Sie 'langsam' javascript um die Funktion, aber mit einigen Schwierigkeiten. Dies ist, was ich habe:

<script type="text/javascript">
function reveal(id) {
   var e = document.getElementById(id);
   if(e.style.display== 'block')
e.style.display= 'none';
   else
e.style.display= 'block';
e.style.opacity= '1';
    }
 </script>

 <script type="text/javascript">
 function hide(id) {
   var e = document.getElementById(id);
   if(e.style.display== 'block')
e.style.display= 'none';
   else
e.style.display= 'none';
    }
 </script>

Ich habe versucht, zahlreiche Möglichkeiten, um die 'animieren' - tag, aber kann nicht scheinen, um es zu bekommen. Helfen ist herzlich willkommen.

Können Sie Ihre HTML-und wenn möglich ein jsFiddle zeigt sich das Problem?
Wenn Sie verwenden möchten, zu animieren, müssen Sie jQuery. Es gibt keine native JS genannt animieren
<a href="#" onclick="zeigen('foo');hide('zu');">Klicken Sie hier, zum Umschalten der Sichtbarkeit der element #foo</a> <div id="foo">Das ist foo</div> <a href="#" onclick="zeigen('zu'); hide('foo');">Klicken Sie hier, zum Umschalten der Sichtbarkeit des Elements #zu</a> <div id="zu">Dieser wird zu</div>
Oh, ich hatte gesehen, wie dieser Beitrag: stackoverflow.com/questions/2960741/... und probiert, und habe das Umschalten der animation zu arbeiten. Ich will nur gelten, dass die gleichen visuellen Effekt zu dem, was ich da gemacht
Als mplungjan Punkte heraus, animieren (ein-und ausblenden) werden jQuery-Funktionen. Wenn Sie Sie nutzen wollen, müssen Sie include jQuery, ansonsten müssen Sie code, der der entsprechenden reinen JavaScript-Funktionen selbst.

InformationsquelleAutor Kyle | 2012-05-11

  1. 1

    Blick auf die Fiedel, es scheint sehr verwirrend. Ich kam mit einem sauberen Satz von codes, die Sie verwenden können, für jetzt, aber du hast eine Menge zu lernen. Fiddle Hinzugefügt http://jsfiddle.net/KMDjR/7/ STELLEN Sie SICHER, Sie rufen jquery (fiddle heißt es auf der linken, sondern in Ihrer Seite, die Sie aufrufen müssen Sie es selbst, wie mein code unten zeigt)

    <html>
<head>

<style>
#foo{
display: none;
}

#poo{
display: none;
}
</style>
<!-- calling jquery  -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('.toggleFoo').live('click', function() {
        $('#foo').fadeIn(1000);
        $('#poo').fadeOut(1000);
    });

    $('.togglePoo').live('click', function() {
        $('#poo').fadeIn(1000);
        $('#foo').fadeOut(1000);
    });

});
</script>
</head>
    <body>
        <a href="#" class="toggleFoo">Click here to toggle visibility of element #foo</a><br /><br />
        <div id="foo">This is foo</div>

        <a href="#" class="togglePoo">Click here to toggle visibility of element #poo</a><br /><br />
        <div id="poo">This is poo</div>
</body>
</html>
    Vielen Dank für Ihre Antwort Huangism, ich weiß, ich haben sicherlich einen langen Weg zu gehen, mit code (wie ich schon sagte, dies ist mein Erster code, den ich je geschrieben habe in javascript oder jquery). Leider funktionierte dies nicht auf meiner Seite. Vielleicht gibt es einen Konflikt hookahi.com/menu-test#
    wenn Sie kopieren Sie den Kern aus der code, den ich zur Verfügung gestellt, Sie sollte das tun, was Sie wollen, aber Sie sollten wirklich beginnen, sich mit grundlegenden javascript-und arbeiten Sie Ihren Weg nach oben. Ich möchte auch Sie, dass der check mark!
    Vielen Dank für die Beantwortung. Yeah ich den code einfach so rein, wie Sie es haben, aber ich bekomme keine Antwort wenn ich auf die links. Hast du dir über den link, den ich gepostet?
    du meinst die fiddle-link? Ihr ich sah, es war ein riesiges Durcheinander, ich erstelle ein Turnschuh und befestigen Sie es an meiner Antwort
    Ich meinte das man hookahi.com/menu-test# es hat die test-Seite. Ich kann nicht sagen, warum es nicht funktioniert...

    InformationsquelleAutor Huangism

Schreibe einen Kommentar