Heim > Artikel > Web-Frontend > JQuery-Animation hide() und show() Verwendungserklärung 1 (Codebeispiel)

JQuery-Animation hide() und show() Verwendungserklärung 1 (Codebeispiel)

不言nach vorne: 2019-01-18 10:45:202372Durchsuche

Der Inhalt dieses Artikels befasst sich mit der Verwendung von hide() und show() in der JQuery-Animation (Codebeispiel). Ich hoffe, dass er für Sie nützlich ist . Hilft.

Die Methoden hide() und show() können Animationseffekte festlegen. In diesem Artikel werden die Auswirkungen dieser beiden Methoden erläutert.

hide (Parameter 1, Parameter 2):

Parameter 1: Zeit in Millisekunden, die die Zeit angibt, die benötigt wird, bis das Objekt ausgeblendet wird

Parameter 2: Rückruf Funktion, diese Funktion wird ausgelöst, nachdem das Objekt ausgeblendet wurde.

show(Parameter 1, Parameter 2):

Parameter 1: Wie oben

Parameter 2: Wie oben

Beispiel:

Anforderungsbeschreibung: Klicken Sie auf ein Bild, das Bild wird langsam ausgeblendet und dann von der Seite gelöscht. Das letztere Bild ergänzt die Position des vorherigen Bildes

Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        img{
            width: 100px;
            height: 80px;
        }
        
        #pics div{
            float: left;
            margin: 2px;
            width: 100px;
            height: 80px;
        }
    </style>
    <script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>
    <script>
        $(function(){
            //获取所有的图片,并注册点击事件
            $("#pics>div").click(function(){
                $(this).hide(800,function(){
//回调函数，清除当前点击的元素
                    $(this).remove();//方法移除当前调用这个方法的元素---自杀
                });
            });
        });
    </script>
</head>
<body>
    <div id="pics">
        <div><img src="images/01.jpg" ></div>
        <div><img src="images/02.jpg" ></div>
        <div><img src="images/03.jpg" ></div>
        <div><img src="images/04.jpg" ></div>
        <div><img src="images/05.jpg" ></div>
    </div>
</body>
</html>

Hinweis:

 $(this).remove();//方法移除当前调用这个方法的元素---自杀

Das obige ist der detaillierte Inhalt vonJQuery-Animation hide() und show() Verwendungserklärung 1 (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:cnblogs.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：JavaScript implementiert den Effekt einer Lupe (Codebeispiel)Nächster Artikel：JavaScript implementiert den Effekt einer Lupe (Codebeispiel)

In Verbindung stehende Artikel

Mehr sehen