Wie kann man ein Div in jQuery "verblassen" und "entfernen"?

233

Ich versuche, einem Div einen Ausblendeffekt zu verleihen und diesen Div zu löschen (id = "Benachrichtigung"), wenn auf ein Bild geklickt wird.

So mache ich das:

<a onclick="$("#notification").fadeOut(300,function() { $("#notification").remove(); });" class="notificationClose "><img src="close.png"/></a>

Dies scheint nicht zu funktionieren. Was muss ich tun, um dies zu beheben?

javascript jquery RSilva
quelle

14

15 Stimmen für die Frage und 55 Stimmen für die Antwort ... und es war eindeutig nur ein Tippfehler ... wtf?

Ivan Castellanos

4

Jetzt ist 34 und 110 :). Ich bin hier gelandet, weil ich nicht wusste, wie ich ein Element entfernen soll, nachdem es ausgeblendet ist (Sie können sich vorstellen: Ich habe kein RTFM durchgeführt).

Orique

4

Unabhängig vom Tippfehler wird die Frage in den Google-Ergebnissen angezeigt und ich stimme zu, wenn ich schnell Antworten finde.

Valamas

440

Versuche dies:

<a onclick='$("#notification").fadeOut(300, function() { $(this).remove(); });' class="notificationClose "><img src="close.png"/></a>

Ich denke, Ihre doppelten Anführungszeichen haben onclickdazu geführt, dass es nicht funktioniert hat. :) :)

BEARBEITEN : Wie unten ausgeführt, ist Inline-Javascript böse, und Sie sollten dies wahrscheinlich aus dem onclickentfernen und es in den click()Ereignishandler von jQuery verschieben . So machen es die coolen Kids heutzutage.

Paolo Bergantino
quelle

24

Sie sollten JavaScript nicht inline verwenden, da es schwierig ist, Änderungen auf konsistente Weise vorzunehmen.

Nick Berardi

14

Ich kann es nicht gutheißen, ich helfe dem Kerl nur bei seinem Problem. Manchmal predige ich, ich bin gerade aufgewacht und ich bin nicht in der "Extrameile" Stimmung. Ihr Beitrag macht den Job jedoch. :)

Paolo Bergantino

Könnten Sie näher erläutern, wie böse der Onclick-Handler ist? Liegt es nur an der Wartbarkeit oder gibt es einen technischen Grund?

Panzi

2

Lohnt es sich wirklich, jedes Mal eine separate Datei zu erstellen, wenn Sie eine Zeile JavaScript auf einer Seite haben möchten? Ich denke, Inline hat seinen Platz.

Casey

91

Sie sollten wirklich versuchen, jQuery in einer separaten Datei zu verwenden, nicht inline. Folgendes benötigen Sie:

<a class="notificationClose "><img src="close.png"/></a>

Und das am Ende Ihrer Seite <script>mindestens in Tags oder in einer externen JavaScript-Datei.

$(".notificationClose").click(function() {
    $("#notification").fadeOut("normal", function() {
        $(this).remove();
    });
});

Nick Berardi
quelle

Ich habe es versucht, konnte es aber nicht zum Laufen bringen. Der obige Inline-Link hat funktioniert und die beiden sind praktisch identisch. Hier ist es ... jsfiddle.net/AndyMP/DBrf5

Andy

1

@Andy: Erstens hast du vergessen, die Bibliothek auf jQuery zu setzen;) Zweitens musst du sie, wenn du sie auf deiner Site verwendest, auch in $(document).ready(function() {und einbinden });. (auf jsFiddle ist es onload, also erledigt es das für dich)

Nathan

@ Nick Berardi, können wir das mit einem Bildlauf nach unten machen?

Super Model

55

Wenn Sie es an verschiedenen Orten verwenden, sollten Sie es in ein Plugin verwandeln.

jQuery.fn.fadeOutAndRemove = function(speed){
    $(this).fadeOut(speed,function(){
        $(this).remove();
    })
}

Und dann:

// Somewhere in the program code.
$('div').fadeOutAndRemove('fast');

Sam Sehnert
quelle

Ich habe mir gerade angesehen, wie das geht, und für meinen Zweck ist der "Plugin"

-Weg

30

Hast du das versucht?

$("#notification").fadeOut(300, function(){ 
    $(this).remove();
});

Das heißt, Sie verwenden den aktuellen this- Kontext, um auf das Element in der inneren Funktion und nicht auf die ID abzuzielen. Ich benutze dieses Muster die ganze Zeit - es sollte funktionieren.

Tamas Czinege
quelle

4

Wenn Sie so etwas wie ich von einer Google-Suche sind und ein HTML-Element mit cooler Animation entfernen möchten, könnte dies Ihnen helfen:

$(document).ready(function() {
    
    var $deleteButton = $('.deleteItem');

    $deleteButton.on('click', function(event) {
    
        event.preventDefault();

        var $button = $(this);

        if(confirm('Are you sure about this ?')) {

            var $item = $button.closest('tr.item');

            $item.addClass('removed-item')

                .one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {

                    $(this).remove();
            });
        }
      
    });
    
});

/**
 * Credit to Sara Soueidan
 * @link https://github.com/SaraSoueidan/creative-list-effects/blob/master/css/styles-3.css
 */

.removed-item {
    -webkit-animation: removed-item-animation .8s cubic-bezier(.65,-0.02,.72,.29);
    -o-animation: removed-item-animation .8s cubic-bezier(.65,-0.02,.72,.29);
    animation: removed-item-animation .8s cubic-bezier(.65,-0.02,.72,.29)
}

@keyframes removed-item-animation {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0)
    }

    30% {
        opacity: 1;
        -webkit-transform: translateX(50px);
        -ms-transform: translateX(50px);
        -o-transform: translateX(50px);
        transform: translateX(50px)
    }

    80% {
        opacity: 1;
        -webkit-transform: translateX(-800px);
        -ms-transform: translateX(-800px);
        -o-transform: translateX(-800px);
        transform: translateX(-800px)
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(-800px);
        -ms-transform: translateX(-800px);
        -o-transform: translateX(-800px);
        transform: translateX(-800px)
    }
}

@-webkit-keyframes removed-item-animation {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    30% {
        opacity: 1;
        -webkit-transform: translateX(50px);
        transform: translateX(50px)
    }

    80% {
        opacity: 1;
        -webkit-transform: translateX(-800px);
        transform: translateX(-800px)
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(-800px);
        transform: translateX(-800px)
    }
}

@-o-keyframes removed-item-animation {
    0% {
        opacity: 1;
        -o-transform: translateX(0);
        transform: translateX(0)
    }

    30% {
        opacity: 1;
        -o-transform: translateX(50px);
        transform: translateX(50px)
    }

    80% {
        opacity: 1;
        -o-transform: translateX(-800px);
        transform: translateX(-800px)
    }

    100% {
        opacity: 0;
        -o-transform: translateX(-800px);
        transform: translateX(-800px)
    }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <table class="table table-striped table-bordered table-hover">
    <thead>
      <tr>
        <th>id</th>
        <th>firstname</th>
        <th>lastname</th>
        <th>@twitter</th>
        <th>action</th>
      </tr>
    </thead>
    <tbody>
      
      <tr class="item">
        <td>1</td>
        <td>Nour-Eddine</td>
        <td>ECH-CHEBABY</td>
        <th>@__chebaby</th>
        <td><button class="btn btn-danger deleteItem">Delete</button></td>
      </tr>
      
      <tr class="item">
        <td>2</td>
        <td>John</td>
        <td>Doe</td>
        <th>@johndoe</th>
        <td><button class="btn btn-danger deleteItem">Delete</button></td>
      </tr>
      
      <tr class="item">
        <td>3</td>
        <td>Jane</td>
        <td>Doe</td>
        <th>@janedoe</th>
        <td><button class="btn btn-danger deleteItem">Delete</button></td>
      </tr>
    </tbody>
  </table>
  
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />


</body>
</html>

Erweitern Sie das Snippet

Chebaby
quelle

-1

.fadeOut ('langsam', dies.entfernen);

Alvar Vilu
quelle

-9

Verwenden

.fadeOut(360).delay(400).remove();

andrewpolyakov
quelle

4

Dies funktioniert nicht, die removeMethode wird sofort nach demfadeOut

Iulian Onofrei

Wie kann man ein Div in jQuery "verblassen" und "entfernen"?

Antworten: