Comment "fadeOut" et "supprimer" un div dans jQuery?

Question

J'essaie de donner un effet de fondu à un div & supprimer div (id = "notification"), quand une image est cliquée.

Voilà comment je fais ça:

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

Cela semble ne pas fonctionner. Que dois-je faire pour résoudre ce problème?

Answer 1

Essayez ceci:

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

Je pense que vos guillemets doubles autour du onclick faisaient fonctionner pas. :)

EDIT: Comme indiqué ci-dessous, en ligne javascript est mal et vous devriez probablement prendre cela de la onclick et le déplacer vers le gestionnaire d'événements click() jQuery. C'est ainsi que les enfants cool le font de nos jours.

Answer 2

Avez-vous essayé?

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

C'est, en utilisant le courant ce contexte pour cibler l'élément dans la fonction intérieure et non l'id. J'utilise ce modèle tout le temps - ça devrait marcher.

Answer 3

vous devriez vraiment essayer d'utiliser jQuery dans un fichier séparé, pas en ligne. Voici ce que vous avez besoin:

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

Et ce en bas de votre page dans <script> balises à tout le moins ou dans un fichier JavaScript externe.

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

Answer 4

Si vous l'utilisez à plusieurs endroits différents, vous devriez le transformer en un plugin.

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

Et puis:

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

Answer 5

Utilisez

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

Answer 6

si vous êtes comme moi comming d'une recherche Google et cherche à supprimer un élément HTML avec animation cool, cela pourrait vous aider:

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