Bei einem gegebenen Dokument besteht die Aufgabe darin, mithilfe von JavaScript fadeOut() und slideUP() gleichzeitig auszuführen. Hier werden 2 Ansätze diskutiert.

Ansatz 1:
Wählen Sie zuerst das Element aus. Verwenden Sie die Methode animate() , um beide Operationen auszuführen. Diese Methode benötigt 4 Argumente, aber in diesem Fall werden nur 2 verwendet. Das erste ist das CSS, das wir animieren möchten, und das zweite ist die Geschwindigkeit. CSS ist {Höhe: 0, Deckkraft: 0} und die verwendete Geschwindigkeit ist „langsam“. Die Height-Eigenschaft wird verwendet, um den slideUp-Effekt auszuführen, und die Opazität wird verwendet, um den fadeOut-Effekt auszuführen.

  • Beispiel: Dieses Beispiel implementiert den obigen Ansatz.




    <!DOCTYPE HTML>
    <html>
      
    <head>
        <title>
            Perform fadeOut() and slideUp()
          at the same time with JavaScript
        </title>
        <style>
            #div {
                background: green;
                height: 100px;
                width: 200px;
                margin: 0 auto;
                color: white;
            }
        </style>
        <script src=
    "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
        </script>
    </head>
      
    <body style="text-align:center;">
        <h1 style="color:green;">  
                GeeksForGeeks  
            </h1>
        <p id="GFG_UP" 
           style="font-size: 19px; font-weight: bold;">
        </p>
        <div id="div">
            This is Div box.
        </div>
        <br>
        <button onClick="GFG_Fun()">
            click here
        </button>
        <br>
        <p id="GFG_DOWN" 
           style="color: green; 
                  font-size: 24px; 
                  font-weight: bold;">
        </p>
        <script>
            $('#GFG_UP').text(
              "Click on button to perform fadeOut and slideUp at same time.");
      
            function GFG_Fun() {
                $("#div").animate({
                    height: 0,
                    opacity: 0
                }, 'slow');
                $('#GFG_DOWN').text(
                  "Both operations performed simultaneously.");
            }
        </script>
    </body>
      
    </html>
  • Ausgabe:

Ansatz 2:
Wählen Sie zuerst das Element aus. Verwenden Sie die Methode animate() , um beide Operationen auszuführen. Diese Methode nimmt 4 Argumente, aber in diesem Fall werden nur 2 verwendet. Das erste ist das CSS, das wir animieren möchten, und das zweite ist die Geschwindigkeit. CSS ist {height: 'toggle', opacity: 'toggle'} und die verwendete Geschwindigkeit ist 'langsam'. Die Height-Eigenschaft wird verwendet, um den slideUp-Effekt auszuführen, und die Opazität wird verwendet, um den fadeOut-Effekt auszuführen. Dieses Beispiel kann den Effekt auch umkehren.

  • Beispiel: Dieses Beispiel implementiert den obigen Ansatz.




    <!DOCTYPE HTML>
    <html>
      
    <head>
        <title>
            Perform fadeOut() and slideUp() 
          at the same time with JavaScript
        </title>
        <style>
            #div {
                background: green;
                height: 100px;
                width: 200px;
                margin: 0 auto;
                color: white;
            }
        </style>
        <script src=
    "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
        </script>
    </head>
      
    <body style="text-align:center;">
        <h1 style="color:green;">  
                GeeksForGeeks  
            </h1>
        <p id="GFG_UP" 
           style="font-size: 19px;
                  font-weight: bold;">
        </p>
        <div id="div">
            This is Div box.
        </div>
        <br>
        <button onClick="GFG_Fun()">
            click here
        </button>
        <br>
        <p id="GFG_DOWN" 
           style="color: green; 
                  font-size: 24px; 
                  font-weight: bold;">
        </p>
        <script>
            $('#GFG_UP').text(
           "Click on button to perform fadeOut and slideUp at same time.");
      
            function GFG_Fun() {
                $("#div").animate({
                    height: 'toggle',
                    opacity: 'toggle'
                }, 'slow');
                $('#GFG_DOWN').text(
               "Both operations performed simultaneously.");
            }
        </script>
    </body>
      
    </html>
  • Ausgabe: