Comment «fadeOut» et «supprimer» un div dans jQuery?

233

J'essaie de donner un effet de fondu à un div et de le supprimer (id = "notification"), lorsqu'une image est cliquée.

Voici comment je fais ça:

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

Cela ne semble pas fonctionner. Que dois-je faire pour résoudre ce problème?

javascript jquery RSilva
la source

14

15 votes pour la question et 55 votes pour la réponse ... et ce n'était clairement qu'une faute de frappe ... wtf?

Ivan Castellanos

4

Est maintenant 34 et 110 :). J'ai atterri ici parce que je ne savais pas comment supprimer un élément APRÈS sa disparition (vous pouvez deviner: je n'ai pas RTFM).

orique

4

quelle que soit la faute de frappe, la question apparaît dans les résultats de google et je vote positivement lorsque je trouve des réponses rapidement.

Valamas

440

Essaye ça:

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

Je pense que vos doubles guillemets autour de la onclickfont que ça ne fonctionne pas. :)

EDIT : Comme indiqué ci-dessous, le javascript en ligne est mauvais et vous devriez probablement le retirer du onclicket le déplacer vers le click()gestionnaire d'événements de jQuery . C'est ainsi que les enfants cool le font de nos jours.

Paolo Bergantino
la source

24

Vous ne devez pas utiliser JavaScript en ligne, car il est difficile de changer de manière cohérente.

Nick Berardi

14

Je ne pardonne pas, j'aide juste le gars avec son problème. Parfois je prêche, je viens de me réveiller et je ne suis pas d'humeur "extra mile". Votre message fait le travail, cependant. :)

Paolo Bergantino

Pourriez-vous nous expliquer en quoi le gestionnaire onclick est mauvais? Est-ce simplement pour des raisons de maintenabilité ou pour une raison technique?

panzi

2

Vaut-il vraiment un fichier séparé chaque fois que vous voulez une ligne de JavaScript sur une page? Je pense que l'inline a sa place.

Casey

91

vous devriez vraiment essayer d'utiliser jQuery dans un fichier séparé, pas en ligne. Voici ce dont vous avez besoin:

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

Et puis cela au bas de votre page dans des <script>balises au moins ou dans un fichier JavaScript externe.

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

Nick Berardi
la source

J'ai essayé mais je n'ai pas réussi à le faire fonctionner. Le lien en ligne ci-dessus a fonctionné et les deux sont pratiquement identiques. Le voici ... jsfiddle.net/AndyMP/DBrf5

Andy

1

@Andy: tout d'abord, vous avez oublié de définir la bibliothèque sur jQuery;) Deuxièmement, si vous l'utilisez sur votre site, vous devez également l'envelopper dans $(document).ready(function() {et });. (sur jsFiddle c'est onload donc ça fait ça pour vous)

Nathan

@ Nick Berardi, pouvons-nous le faire avec le défilement de la page suivante?

Super Model

55

Si vous l'utilisez à plusieurs endroits différents, vous devez le transformer en plugin.

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

Puis:

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

Sam Sehnert
la source

Je cherchais juste comment faire cela, et pour mon but, la façon "plugin" est meilleure pour moi, merci

Harag

30

Avez-vous essayé cela?

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

Autrement dit, en utilisant le courant ce contexte pour cibler l'élément dans la fonction intérieure et non l'id. J'utilise ce modèle tout le temps - cela devrait fonctionner.

Tamas Czinege
la source

5

si vous êtes comme moi venant d'une recherche google et que vous cherchez à supprimer un élément html avec une animation sympa, cela pourrait vous aider:

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

Développer l'extrait

chebaby
la source

-1

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

Alvar Vilu
la source

-9

Utilisation

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

andrewpolyakov
la source

4

Cela ne fonctionne pas, la removeméthode est appelée immédiatement après lefadeOut

Iulian Onofrei

Comment «fadeOut» et «supprimer» un div dans jQuery?

Réponses: