如何在jQuery中"淡出"和"删除"一个div？

Question

如何在jQuery中"淡出"和"删除"一个div？

当点击图像时,我正试图将fadeout效果赋予div并删除div(id ="notification").

这就是我这样做的方式:

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

Run Code Online (Sandbox Code Playgroud)

这似乎不起作用.我需要做些什么来解决这个问题？

Answer 1

Pao*_*ino 425

试试这个:

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

Run Code Online (Sandbox Code Playgroud)

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

编辑:正如下面所指出的,内联javascript是邪恶的,你应该把它拿出来onclick并移动到jQuery的click()事件处理程序.这就是酷孩子们现在正在做的事情.

您不应该使用内联JavaScript,因为它很难以一致的方式进行更改. (23认同)
我不宽恕它,我只是帮他解决他的问题.有时我讲道,我只是醒来,我不是在"额外的英里"的心情.不过,你的帖子完成了这项工作.:) (13认同)
很酷的孩子+1评论,因为Jquery非常koowel. (3认同)
每次你想在页面上使用一行JavaScript时,它真的值得一个单独的文件吗？我认为内联有它的位置. (2认同)

Answer 2

Nic*_*rdi 91

你真的应该尝试在一个单独的文件中使用jQuery,而不是内联.这是你需要的:

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

Run Code Online (Sandbox Code Playgroud)

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

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

Run Code Online (Sandbox Code Playgroud)

Answer 3

Sam*_*ert 53

如果你在几个不同的地方使用它,你应该把它变成一个插件.

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

Run Code Online (Sandbox Code Playgroud)

然后:

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

Run Code Online (Sandbox Code Playgroud)

Answer 4

Tam*_*ege 30

你试过这个吗？

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

Run Code Online (Sandbox Code Playgroud)

即,使用当前这个上下文到目标在内部功能的元件,而不是ID.我一直使用这种模式 - 它应该工作.

Answer 5

che*_*aby 5

如果您像我一样从谷歌搜索中获得并希望删除带有酷炫动画的 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();
            });
        }
      
    });
    
});

Run Code Online (Sandbox Code Playgroud)

/**
 * 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)
    }
}

Run Code Online (Sandbox Code Playgroud)

<!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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	17 年前
查看次数：	164684 次
最近记录：	7 年，4 月前