Làm thế nào để "fadeOut" & "loại bỏ" một div trong jQuery?

Question

Tôi đang cố gắng tạo hiệu ứng mờ dần cho div & xóa div (id = "thông báo") đó, khi một hình ảnh được nhấp.

Đây là cách tôi làm điều đó:

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

Điều này dường như không được làm việc. Tôi cần phải làm gì để sửa lỗi này?

Answer 1

Hãy thử điều này:

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

Tôi nghĩ rằng dấu ngoặc kép của bạn xung quanh onclick đã làm cho nó không hoạt động. :)

EDIT: Như đã chỉ ra dưới đây, inline javascript là ác và có lẽ bạn nên thực hiện việc này ra khỏi onclick và di chuyển nó đến handler click() sự kiện của jQuery. Đó là cách những đứa trẻ mát mẻ đang làm nó ngày nay.

Answer 2

Bạn đã thử điều này chưa?

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

Đó là, sử dụng dòng điện bối cảnh này để nhắm mục tiêu các phần tử trong các chức năng bên trong và không phải là id. Tôi sử dụng mẫu này mọi lúc - nó sẽ hoạt động.

Answer 3

bạn thực sự nên cố gắng sử dụng jQuery trong một tệp riêng biệt, không phải nội tuyến. Dưới đây là những gì bạn cần:

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

Và sau đó điều này ở cuối trang của bạn trong ít nhất hoặc trong tệp JavaScript bên ngoài.

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

Answer 4

Nếu bạn đang sử dụng nó ở nhiều nơi khác nhau, bạn nên biến nó thành plugin.

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

Và sau đó:

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

Answer 5

Sử dụng

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

Answer 6

nếu bạn là bất cứ điều gì như tôi đến từ một tìm kiếm google và tìm cách để loại bỏ một yếu tố html với hoạt hình mát mẻ, thì đây có thể giúp bạn:

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