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

Antworten:

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
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.