Як "fadeOut" та "видалити" div у jQuery?

233

Я намагаюся надати ефект fadeout діві та видалити цей div (id = "сповіщення"), коли натискається зображення.

Ось як я це роблю:

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

Це, здається, не працює. Що мені потрібно зробити, щоб це виправити?

javascript  jquery 
— RSilva
джерело
14
15 голосів за запитання і 55 голосів за відповідь ... і це було явно просто помилково ... wtf?
— Іван Кастельянос
4
Зараз 34 та 110 :). Приземлився тут, тому що я не знав, як видалити елемент ПІСЛЯ він зів’яв (ви можете здогадатися: я не RTFM).
— orique
4
незалежно від помилки друку, питання з’являється в результатах google, і я піднімаю голос, коли швидко знаходжу відповіді.
— Валамас

Відповіді:

440

Спробуйте це:

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

Я думаю, що ваші подвійні цитати навколо onclickзмусили його не працювати. :)

EDIT : Як зазначено нижче, вбудований JavaScript є злим, і, ймовірно, слід вийняти це з onclickта перемістити його до click()обробника подій jQuery . Ось як це роблять круті діти сьогодні.

— Паоло Бергантіно
джерело
24
Не слід використовувати вбудований JavaScript, оскільки це ускладнює послідовне змінення.
— Нік Берарді
14
Я не потураю, я просто допомагаю хлопцеві зі своєю проблемою. Іноді я проповідую, просто прокинувся і не в настрої "зайвої милі". Однак ваша посада виконує цю роботу. :)
— Паоло Бергантіно
Не могли б ви детальніше розповісти про те, як злий обробник onclick? Це тільки через ремонтопридатність чи є технічна причина?
— панці
2
Чи справді варто окремий файл кожного разу, коли ви хочете отримати один рядок JavaScript на сторінці? Я думаю, що інлайн має своє місце.
— Кейсі
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 це завантаження, і це робить для вас)
— Натан
@Nick Berardi, чи можемо ми це зробити з прокруткою сторінки вниз?
— Super Model
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();
});

Тобто, використовуючи поточний цей контекст для націлювання на елемент у внутрішній функції, а не на 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>
Розгорніть фрагмент

— чебаби
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.