2009-09-16 10 views
6

Ich verwende den folgenden Code, um ein div zu animieren.Wie entferne ich ein Element NACH der Animation?

<script> 
    $(function() { 
    $("a.shift").click(function() { 
     $("#introOverlay").animate({ 
     height: 0, 
     }, 2000) 
    }); 
    }); 
</script> 

Wenn die Animation beendet ist, möchte ich es entfernen. Wie kann ich das machen?

Antwort

8

animate dauert 2 mehr params, so dass Sie tun können:

$("a.shift") 
    .click(function() 
     { 
      $("#introOverlay") 
       .animate({height: 0}, 2000,"linear",function() 
        { 
         $(this).remove(); 
        } 
       ) 
     } 
    ); 

Ungeprüfte.

EDIT: Getestet: hier ist die volle Seite, die ich verwendet, die mehr auf der Hand zu 300px make Entfernung erweitert:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
     <script type="text/javascript"> 
      //<![CDATA[ 
      $(document).ready(function() 
      { 
       $(".shift").click(function() 
       { 
        $("#introOverlay") 
        .animate({height: 300}, 2000,"linear",function() 
        { 
         $(this).remove(); 
        }) 
       }); 
      }); 
      //]]> 
     </script> 
    </head> 
    <body> 
    <a class="shift" href="javascript:void(0)">clickme</a> 
    <div id="introOverlay" style="background-color:red;height:200px;">overlay</div> 
    </body> 
</html> 
+0

Hallo Spender, Das entfernt das Element nicht, wenn die Animation beendet ist. – Martin

+0

Perfekt! Vielen Dank! – Martin

-3

Verwenden Sie window.timeout mit der gleichen Zeit wie die Animation.

2

JQuery animate(params, [duration], [easing], [callback]) bietet die Möglichkeit, einen Rückruf hinzufügen, die

abgeschlossen wird für jedes Mal, wenn die Animation genannt wird

Rückruf (optional) Funktion: Eine Funktion ausgeführt werden, wenn die Animation abgeschlossen ist, führt einmal für Jedes Element wird gegen animiert.

Die Syntax ist ziemlich jQuery einfach:

<script> 
$(function() { 
    $("a.shift").click(function() { 
     $("#introOverlay").animate({ 
     height: 0, 
     }, 2000, "linear", 
      function() { 
       $("#introOverlay").hide(); 
      } 
     ) 
     }); 

    }) 
</script> 

Siehe auch diese SO question

+0

Dank Daff , Können Sie mir einen Beispielcode geben? Es ist die Syntax, die ich nicht verstehe. – Martin

+0

Schau dir die Frage an, die ich verlinkt habe, dort ist ein Codebeispiel (kopiert es auch hier). Grundsätzlich übergeben Sie die Callback-Funktion einfach als Parameter. – Daff

1

Setzen Sie den remove() Anruf in der Effekte-Warteschlange wie folgt aus:

$("a.shift").click(function() { 
    $("#introOverlay").animate({ 
    height: 0, 
    }, 2000); 
    $("#introOverlay").queue(function() { 
    $(this).remove(); 
    $(this).dequeue(); 
    }); 
}); 
+0

Ich suchte nach einer Möglichkeit, Text in der Warteschlange zu aktualisieren. Dieses Wort eignet sich hervorragend, um Anrufe ohne Warteschlange wie .text ("") in die Warteschlange zu stellen. –

Verwandte Themen