Как «fadeOut» и «удалить» div в jQuery?

233

Я пытаюсь дать эффект затухания в div и удалить этот div (id = "Notification"), когда изображение нажимается.

Вот как я это делаю:

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

Кажется, это не работает. Что мне нужно сделать, чтобы это исправить?

javascript jquery RSilva
источник

14

15 голосов за вопрос и 55 голосов за ответ ... и это была явно опечатка ... ВУФ?

Иван Кастелланос

4

Сейчас 34 и 110 :). Приземлился здесь, потому что я не знал, как удалить элемент ПОСЛЕ того, как он исчез, (вы можете догадаться: я не RTFM).

orique

4

независимо от опечатки, вопрос появляется в результатах поиска Google, и я быстро отвечаю, когда быстро нахожу ответы.

Валамас

440

Попробуй это:

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

Я думаю, что ваши двойные кавычки onclickзаставляли это не работать. :)

РЕДАКТИРОВАТЬ : Как указано ниже, встроенный javascript - это зло, и вы, вероятно, должны извлечь это из onclickи перенести в click()обработчик событий jQuery . Вот как крутые ребята делают это сейчас.

Паоло Бергантино
источник

24

Вы не должны использовать встроенный JavaScript, потому что это затрудняет последовательное изменение.

Ник Берарди

14

Я не оправдываю это, я просто помогаю парню с его проблемой. Иногда я проповедую, я просто просыпаюсь, и у меня нет «лишней мили» настроения. Ваш пост делает работу, хотя. :)

Паоло Бергантино

Не могли бы вы рассказать о том, как обработчик onclick является злым? Это просто из-за ремонтопригодности или есть техническая причина?

Panzi

2

Это действительно стоит отдельный файл каждый раз, когда вы хотите одну строку JavaScript на странице? Я думаю, что inline имеет свое место.

Кейси

91

Вы действительно должны попытаться использовать jQuery в отдельном файле, а не в строке. Вот что вам нужно:

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

И затем это в нижней части вашей страницы, <script>по крайней мере, в тегах или во внешнем файле JavaScript.

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

Ник Берарди
источник

Я попробовал это, но не смог заставить его работать. Встроенная ссылка выше сработала, и они практически идентичны. Вот оно ... jsfiddle.net/AndyMP/DBrf5

Энди

1

@Andy: во-первых, вы забыли установить библиотеку в jQuery;) Во-вторых, если вы используете ее на своем сайте, вам также нужно обернуть ее $(document).ready(function() {и });. (на jsFiddle это onload, так что он делает это для вас)

Натан

@ Ник Берарди, мы можем сделать это с помощью прокрутки вниз страницы?

Супер модель

55

Если вы используете его в нескольких разных местах, вы должны превратить его в плагин.

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

А потом:

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

Сэм Шенерт
источник

Я просто смотрел на то, как это сделать, и для моих целей «плагин» лучше для меня, спасибо

Хараг

30

Вы пробовали это?

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

То есть используя текущий контекст this для нацеливания на элемент во внутренней функции, а не на id. Я использую этот шаблон все время - он должен работать.

Тамас Чинеге
источник

5

если вы похожи на меня из поиска в Google и хотите удалить элемент html с классной анимацией, то это может помочь вам:

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

Развернуть фрагмент

chebaby
источник

-1

.fadeOut («медленно», this.remove);

Алвар Вилю
источник

-9

использование

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

andrewpolyakov
источник

4

Это не работает, removeметод вызывается сразу послеfadeOut

Iulian Onofrei

Как «fadeOut» и «удалить» div в jQuery?

Ответы: