Làm thế nào để xóa dần fadeOut và & xóa bỏ một div trong jQuery?

233

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 hình ảnh được nhấp.

Đây là cách tôi đang 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 làm gì để khắc phục điều này?

javascript jquery

— RSilva
nguồn

14

15 phiếu cho câu hỏi và 55 phiếu cho câu trả lời ... và rõ ràng đó chỉ là một lỗi đánh máy ... wtf?

— Ivan Castellanos

4

Bây giờ là 34 và 110 :). Hạ cánh ở đây vì tôi không biết cách loại bỏ một yếu tố SAU KHI nó bị mờ dần (bạn có thể đoán: Tôi đã không RTFM).

— orique

4

Bất kể lỗi đánh máy, câu hỏi xuất hiện trong kết quả của google và tôi upvote khi tôi tìm thấy câu trả lời nhanh chóng.

— Valamas

440

Thử cái 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ư được chỉ ra dưới đây, javascript nội tuyến là xấu xa và có lẽ bạn nên lấy cái này ra khỏi onclickvà chuyển nó sang bộ click()xử lý sự kiện của jQuery . Đó là cách những đứa trẻ tuyệt vời đang làm điều đó ngày nay.

— Paolo Bergantino
nguồn

24

Bạn không nên sử dụng JavaScript nội tuyến, vì nó khó thay đổi theo cách nhất quán.

— Nick Berardi

14

Tôi không tha thứ, tôi chỉ giúp anh chàng giải quyết vấn đề của mình. Đôi khi tôi giảng, tôi vừa thức dậy và tôi không ở trong tâm trạng "thêm dặm". Bài viết của bạn làm công việc, mặc dù. :)

— Paolo Bergantino

Bạn có thể giải thích làm thế nào xử lý onclick là xấu? Có phải chỉ vì khả năng bảo trì hoặc có một lý do kỹ thuật?

— panzi

2

Có thực sự đáng giá một tệp riêng biệt mỗi khi bạn muốn một dòng JavaScript trên một trang không? Tôi nghĩ rằng nội tuyến có vị trí của nó.

— Casey

91

bạn thực sự nên thử sử dụng jQuery trong một tệp riêng biệt, không phải nội tuyến. Đây la cai ma bạn cân:

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

Và sau đó ở cuối trang của bạn trong <script>các thẻ ít nhất hoặc trong một tệp JavaScript bên ngoài.

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

— Nick Berardi
nguồn

Tôi đã thử điều này nhưng không thể làm cho nó hoạt động. Các liên kết nội tuyến ở trên đã làm việc, và cả hai thực tế là giống hệt nhau. Đây là ... jsfiddle.net/AndyMP/DBrf5

— Andy

1

@Andy: trước hết bạn quên đặt thư viện thành jQuery;) Thứ hai, nếu bạn sử dụng nó trên trang web của mình, bạn cũng cần phải bọc nó trong $(document).ready(function() {và });. (trên jsFiddle, nó đang được tải vì vậy nó sẽ giúp bạn)

— Nathan

@Nick Berardi, chúng ta có thể làm điều đó với cuộn trang xuống không?

— Siêu mẫu

55

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

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

Và sau đó:

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

— Sam Sehnert
nguồn

Tôi chỉ xem làm thế nào để làm điều này và với mục đích của tôi, cách "plugin" tốt hơn cho tôi, cảm ơn

— Harag

30

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

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

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

— Tamas Czinege
nguồn

4

nếu bạn là bất cứ ai như tôi đến từ một tìm kiếm google và đang tìm cách loại bỏ một yếu tố html với hình ảnh động thú vị, thì điều nà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>

Mở rộng đoạn trích

— con yêu
nguồn

-1

.fadeOut ('chậm', this.remove);

— Alvar Vilu
nguồn

-9

Sử dụng

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

— andrewpolyakov
nguồn

4

Điều này không hiệu quả, removephương thức được gọi ngay saufadeOut

— Iulian Onofrei