Bagaimana cara "fadeOut" & "menghapus" div di jQuery?

233

Saya mencoba memberikan efek fadeout pada div & menghapus div itu (id = "notifikasi"), ketika sebuah gambar diklik.

Inilah yang saya lakukan:

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

Ini sepertinya tidak berfungsi. Apa yang harus saya lakukan untuk memperbaikinya?

javascript jquery RSilva
sumber

14

15 suara untuk pertanyaan dan 55 suara untuk jawaban ... dan itu jelas hanya salah ketik ... wtf?

Ivan Castellanos

4

Sekarang 34 dan 110 :). Mendarat di sini karena saya tidak tahu cara menghapus elemen SETELAH menghilang (Anda mungkin menebak: Saya tidak RTFM).

orique

4

terlepas dari salah ketik, pertanyaannya muncul di hasil google dan saya menjawab ketika saya menemukan jawaban dengan cepat.

Valamas

440

Coba ini:

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

Saya pikir tanda kutip ganda Anda di sekitar onclickmembuatnya tidak berfungsi. :)

EDIT : Seperti yang ditunjukkan di bawah, javascript sebaris itu jahat dan Anda mungkin harus mengambil ini onclickdan memindahkannya ke click()event handler jQuery . Begitulah cara anak-anak keren melakukannya saat ini.

Paolo Bergantino
sumber

24

Anda tidak boleh menggunakan inline JavaScript, karena itu membuatnya sulit untuk berubah secara konsisten.

Nick Berardi

14

Saya tidak memaafkannya, saya hanya membantu orang itu dengan masalahnya. Kadang-kadang saya berkhotbah, saya baru bangun tidur dan suasana hati saya tidak "ekstra". Posting Anda melakukan pekerjaan itu. :)

Paolo Bergantino

Bisakah Anda menguraikan bagaimana handler onclick itu jahat? Apakah hanya karena perawatan atau ada alasan teknis?

panzi

2

Apakah ini benar-benar bernilai file terpisah setiap kali Anda ingin satu baris JavaScript pada halaman? Saya pikir inline memiliki tempatnya.

Casey

91

Anda benar-benar harus mencoba menggunakan jQuery dalam file terpisah, bukan inline. Inilah yang Anda butuhkan:

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

Dan kemudian ini di bagian bawah halaman Anda di <script>tag setidaknya atau di file JavaScript eksternal.

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

Nick Berardi
sumber

Saya mencoba ini tetapi tidak berhasil. Tautan sebaris di atas berfungsi, dan keduanya praktis identik. Ini dia ... jsfiddle.net/AndyMP/DBrf5

Andy

1

@Andy: pertama-tama Anda lupa mengatur perpustakaan ke jQuery;) Kedua, jika Anda menggunakannya di situs Anda, Anda juga perlu membungkusnya $(document).ready(function() {dan });. (di jsFiddle itu onload jadi itu untuk Anda)

Nathan

@Nick Berardi, bisakah kita melakukannya dengan scroll halaman ke bawah?

Super Model

55

Jika Anda menggunakannya di beberapa tempat berbeda, Anda harus mengubahnya menjadi plugin.

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

Lalu:

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

Sam Sehnert
sumber

Saya hanya melihat bagaimana melakukan ini, dan untuk tujuan saya, cara "plugin" lebih baik bagi saya, terima kasih

Harag

30

Sudahkah Anda mencoba ini?

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

Yaitu, menggunakan konteks saat ini untuk menargetkan elemen dalam fungsi dalam dan bukan id. Saya menggunakan pola ini sepanjang waktu - itu harus bekerja.

Tamas Czinege
sumber

5

jika Anda seperti saya yang berasal dari pencarian google dan ingin menghapus elemen html dengan animasi keren, maka ini dapat membantu Anda:

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

Luaskan cuplikan

dingin
sumber

-1

.fadeOut ('slow', this.remove);

Alvar Vilu
sumber

-9

Menggunakan

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

andrewpolyakov
sumber

4

Ini tidak berhasil, removemetode dipanggil segera setelahfadeOut

Iulian Onofrei

Bagaimana cara "fadeOut" & "menghapus" div di jQuery?

Jawaban: