Как «fadeOut» & «удалить» div в jQuery?

Question

Я пытаюсь дать эффект затухания для div & удалить этот div (id = "уведомление"), когда нажимается изображение.

Это, как я делаю, что:

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

Это, кажется, не работает. Что мне нужно сделать, чтобы исправить это?

Answer 1

Попробуйте это:

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

Я думаю, что ваши двойные кавычки вокруг onclick делали это не работает. :)

EDIT: Как указано ниже, встроенный браузер зло, и вы, вероятно, следует принять это из onclick и переместить его в обработчик событий click() JQuery в. Вот как сейчас делают холодные дети.

Answer 2

Вы пробовали это?

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

То есть, используя текущий этот контекст для целевого элемента внутренней функции, а не идентификатор. Я использую этот шаблон все время - он должен работать.

Answer 3

Вы действительно должны попытаться использовать jQuery в отдельном файле, а не в строке. Вот то, что вам нужно:

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

А потом это в нижней части страницы в <script> тегов, по крайней мере, или в JavaScript-файл внешнего.

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

Answer 4

Если вы используете его в нескольких разных местах, вы должны превратить его в плагин.

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

И потом:

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

Answer 5

Использование

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

Answer 6

, если вы что-нибудь вроде меня пришедшего от поиска Google и хотите удалить HTML элемент с прохладной анимации, то это может Вам помогут:

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