Come "dissolvenza" e "rimuovere" un div in jQuery?

233

Sto cercando di dare un effetto di dissolvenza a un div ed eliminare quel div (id = "notification"), quando si fa clic su un'immagine.

Ecco come lo sto facendo:

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

Questo sembra non funzionare. Cosa devo fare per risolvere questo problema?

javascript  jquery 
— RSilva
fonte
14
15 voti per la domanda e 55 voti per la risposta ... ed era chiaramente solo un errore di battitura ... wtf?
— Ivan Castellanos,
4
Ora sono 34 e 110 :). Atterrato qui perché non sapevo come rimuovere un elemento DOPO che si è sbiadito (puoi indovinare: non ho RTFM).
— orique,
4
indipendentemente dall'errore di battitura, la domanda viene visualizzata nei risultati di Google e faccio una votazione quando trovo rapidamente le risposte.
— Valamas,

Risposte:

440

Prova questo:

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

Penso che le tue doppie virgolette intorno a non stiano onclickfunzionando. :)

EDIT : Come indicato di seguito, javascript in linea è male e probabilmente dovresti toglierlo da onclicke spostarlo nel click()gestore eventi di jQuery . È così che fanno i ragazzi fighi al giorno d'oggi.

— Paolo Bergantino
fonte
24
Non dovresti usare JavaScript in linea, perché rende difficile cambiare in modo coerente.
— Nick Berardi,
14
Non lo perdono, sto solo aiutando il ragazzo a risolvere il suo problema. A volte predico, mi sono appena svegliato e non sono dell'umore del "miglio in più". Il tuo post fa il lavoro, però. :)
— Paolo Bergantino,
Potresti approfondire in che modo il gestore di onclick è malvagio? È solo a causa della manutenibilità o c'è un motivo tecnico?
— Panzi,
2
Vale davvero la pena un file separato ogni volta che vuoi una riga di JavaScript su una pagina? Penso che inline abbia il suo posto.
— Casey,
91

dovresti davvero provare a usare jQuery in un file separato, non in linea. Ecco cosa ti serve:

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

E poi questo nella parte inferiore della pagina nei <script>tag almeno o in un file JavaScript esterno.

$(".notificationClose").click(function() {
    $("#notification").fadeOut("normal", function() {
        $(this).remove();
    });
});
— Nick Berardi
fonte
Ho provato questo ma non sono riuscito a farlo funzionare. Il collegamento inline sopra ha funzionato, e i due sono praticamente identici. Eccolo ... jsfiddle.net/AndyMP/DBrf5
— Andy,
1
@Andy: prima di tutto hai dimenticato di impostare la libreria su jQuery;) In secondo luogo, se la usi sul tuo sito devi anche avvolgerla $(document).ready(function() {e });. (su jsFiddle è onload quindi lo fa per te)
— Nathan
@ Nick Berardi, possiamo farlo con lo scorrimento della pagina?
— Super Model
55

Se lo stai usando in diversi posti, dovresti trasformarlo in un plugin.

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

E poi:

// Somewhere in the program code.
$('div').fadeOutAndRemove('fast');
— Sam Sehnert
fonte
Stavo solo guardando come fare questo, e per il mio scopo, il modo "plug-in" è migliore per me, grazie
— Harag,
30

Hai provato questo?

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

Cioè, utilizzando la corrente questo contesto per indirizzare l'elemento della funzione interna e non l'id. Uso sempre questo schema: dovrebbe funzionare.

— Tamas Czinege
fonte
5

se sei qualcosa come me proveniente da una ricerca su Google e stai cercando di rimuovere un elemento html con un'animazione interessante, questo potrebbe aiutarti:

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

— chebaby
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.