Jak „zanikać” i „usuwać” div w jQuery?

233

Próbuję nadać efekt zanikania div i usunąć ten div (id = „powiadomienie”) po kliknięciu obrazu.

Tak to robię:

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

To wydaje się nie działać. Co muszę zrobić, aby to naprawić?

javascript  jquery 
— RSilva
źródło
14
15 głosów na pytanie i 55 głosów na odpowiedź ... i wyraźnie była to tylko literówka ... wtf?
— Ivan Castellanos
4
Teraz jest 34 i 110 :). Wylądowałem tutaj, ponieważ nie wiedziałem, jak usunąć element PO zniknięciu (można się domyślić: nie RTFM).
— orique
4
niezależnie od literówki pytanie pojawia się w wynikach Google i głosuję za tym, gdy szybko znajdę odpowiedzi.
— Valamas

Odpowiedzi:

440

Spróbuj tego:

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

Myślę, że twoje podwójne cytaty wokół sprawiły, onclickże to nie działało. :)

EDYCJA : Jak wskazano poniżej, wbudowany javascript jest zły i prawdopodobnie powinieneś go wyjąć onclicki przenieść do modułu click()obsługi zdarzeń jQuery . W ten sposób robią to teraz fajne dzieciaki.

— Paolo Bergantino
źródło
24
Nie powinieneś używać wbudowanego JavaScript, ponieważ utrudnia to spójną zmianę.
— Nick Berardi
14
Nie toleruję tego, po prostu pomagam facetowi rozwiązać jego problem. Czasami głoszę, po prostu się obudziłem i nie jestem w nastroju „dodatkowej mili”. Twój post jednak spełnia swoje zadanie. :)
— Paolo Bergantino
Czy mógłbyś wyjaśnić, w jaki sposób przewodnik onclick jest zły? Czy to tylko ze względu na łatwość konserwacji, czy istnieje powód techniczny?
— panzi
2
Czy naprawdę warto osobny plik za każdym razem, gdy chcesz umieścić na stronie jeden wiersz kodu JavaScript? Myślę, że inline ma swoje miejsce.
— Casey
91

naprawdę powinieneś spróbować użyć jQuery w osobnym pliku, a nie inline. Oto czego potrzebujesz:

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

A potem to u dołu strony <script>przynajmniej w tagach lub w zewnętrznym pliku JavaScript.

$(".notificationClose").click(function() {
    $("#notification").fadeOut("normal", function() {
        $(this).remove();
    });
});
— Nick Berardi
źródło
Próbowałem tego, ale nie udało mi się go uruchomić. Powyższy link wbudowany działał, a oba są praktycznie identyczne. Oto jest ... jsfiddle.net/AndyMP/DBrf5
— Andy
1
@Andy: po pierwsze zapomniałeś ustawić bibliotekę na jQuery;) Po drugie, jeśli używasz jej na swojej stronie, musisz także ją owinąć $(document).ready(function() {i });. (na jsFiddle jest onload, więc robi to za ciebie)
— Nathan
@Nick Berardi, czy możemy to zrobić za pomocą przewijania strony w dół?
— Super Model
55

Jeśli używasz go w kilku różnych miejscach, powinieneś zamienić go we wtyczkę.

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

I wtedy:

// Somewhere in the program code.
$('div').fadeOutAndRemove('fast');
— Sam Sehnert
źródło
Właśnie patrzyłem, jak to zrobić, i dla mojego celu, sposób „plugin” jest dla mnie lepszy, dzięki
— Harag,
30

Próbowałeś tego?

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

To znaczy, używając bieżącego tego kontekstu, aby celować w element funkcji wewnętrznej, a nie identyfikator. Cały czas używam tego wzoru - powinien działać.

— Tamas Czinege
źródło
5

jeśli jesteś podobny do mnie pochodzącego z wyszukiwarki Google i chcesz usunąć element HTML z fajną animacją, może to pomóc:

$(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>
Rozwiń fragment kodu

— chebaby
źródło
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.