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

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

-1

.fadeOut („slow”, this.remove);

Alvar Vilu
źródło

-9

Posługiwać się

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

andrewpolyakov
źródło

4

To nie działa, removemetoda zostaje wywołana natychmiast pofadeOut

Iulian Onofrei

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

Odpowiedzi: