如何在jQuery中“淡出”和“删除” div？

233

我正在尝试为div提供淡入淡出效果，并在单击图像时删除该div（id =“ notification”）。

这就是我这样做的方式：

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

这似乎不起作用。我需要怎么做才能解决此问题？

javascript  jquery 
— 希尔瓦
source
14
这个问题有15票，答案有55票...这显然只是一个错字... wtf？
— 伊万·卡斯泰拉诺斯
4
现在是34和110 :)。降落在这里是因为在消失后我不知道如何删除该元素（您可能会猜到：我没有RTFM）。
— Orique 2013年
4
无论输入错误，该问题都会出现在Google搜索结果中，当我快速找到答案时，我会投票赞成。
— Valamas

Answers:

440

试试这个：

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

我认为您的双引号onclick使它无法正常工作。:)

编辑：正如下面所指出的，嵌入式javascript是邪恶的，您可能应该将其删除onclick并将其移至jQuery的click()事件处理程序。如今，这就是好孩子的做法。

— 保罗·贝尔甘蒂诺
source
24
您不应该内联使用JavaScript，因为它很难以一致的方式进行更改。
— 尼克·贝拉迪
14
我不宽容，我只是在帮助那个家伙解决他的问题。有时我讲道，我只是醒来而已，我并不处于“超常”状态。不过，您的帖子可以完成工作。:)
— Paolo Bergantino，
您能否详细说明onclick处理程序是多么邪恶？仅仅是因为可维护性还是有技术原因？
— panzi 2012年
2
每当您在页面上需要一行JavaScript时，是否真的值得一个单独的文件？我认为内联有它的位置。
— Casey 2014年
91

您确实应该尝试在单独的文件而不是内联中使用jQuery。这是您需要的：

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

然后，这至少在您页面底部的<script>标签中或在外部JavaScript文件中。

$(".notificationClose").click(function() {
    $("#notification").fadeOut("normal", function() {
        $(this).remove();
    });
});
— 尼克·贝拉迪
source
我试过了，但是无法正常工作。上面的内联链接确实起作用，并且两者实际上是相同的。这是... jsfiddle.net/AndyMP/DBrf5
— 安迪
1
@Andy：首先，您忘了将库设置为jQuery;）其次，如果您在网站上使用它，则还需要将其包装在$(document).ready(function() {和中});。（在jsFiddle上它是onload的，所以它为您做到了）
— Nathan
@Nick Berardi，我们可以向下滚动页面吗？
— 超级模特
55

如果要在几个不同的地方使用它，则应将其变成一个插件。

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

然后：

// Somewhere in the program code.
$('div').fadeOutAndRemove('fast');
— 山姆·塞纳特
source
我只是在考虑如何执行此操作，出于我的目的，“插件”方式对我来说更好，谢谢
— Harag 2012年
30

你有尝试过吗？

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

也就是说，使用当前的此上下文来定位内部函数中的元素而不是id。我一直在使用这种模式-它应该起作用。

— 塔玛斯·辛格（Tamas Czinege）
source
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>
展开摘要

— 宝贝
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.