Come "fadeOut" e "rimuovere" un div in jQuery?

Question

Sto cercando di dare un effetto di dissolvenza a un div & eliminare quel div (id = "notifica"), quando un'immagine viene cliccata.

Questo è il modo che sto facendo che:

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

Questo sembra non funzionare. Cosa devo fare per risolvere questo problema?

Answer 1

Prova questo:

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

Credo che la vostra virgolette doppie in tutto il onclick stavano facendo esso non funziona. :)

EDIT: Come sottolineato in basso, in linea javascript è il male e, probabilmente, si dovrebbe prendere questo fuori del onclick e spostarlo gestore click() eventi di jQuery. Ecco come stanno facendo i ragazzi fantastici oggi.

Answer 2

Hai provato questo?

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

Cioè, utilizzando la corrente questo contesto per indirizzare l'elemento della funzione interna e non l'id. Uso questo modello tutto il tempo - dovrebbe funzionare.

Answer 3

si dovrebbe davvero provare a utilizzare jQuery in un file separato, non in linea. Ecco quello che vi serve:

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

E poi questo nella parte inferiore della pagina in <script> tag per lo meno o in un file JavaScript esterno.

Answer 4

Se lo si utilizza in diversi luoghi, è necessario trasformarlo in un plug-in.

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

E poi:

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

Answer 5

Usa

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

Answer 6

se siete come me ritornassi da una ricerca su google e in cerca di rimuovere un elemento HTML con animazione fresco, allora questo potrebbe aiutarti:

$(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>