วิธี "fadeOut" & "ลบ" div ใน jQuery อย่างไร

233

ฉันพยายามให้เอฟเฟ็กต์จางหายไปกับ div & ลบ div นั้น (id = "การแจ้งเตือน") เมื่อมีการคลิกรูปภาพ

นี่คือวิธีที่ฉันทำ:

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

ดูเหมือนว่าจะไม่ทำงาน ฉันต้องทำอะไรเพื่อแก้ไขปัญหานี้

javascript  jquery 
— RSilva
แหล่งที่มา
14
15 โหวตสำหรับคำถามและ 55 โหวตสำหรับคำตอบ ... และมันชัดเจนว่าเป็นเพียงแค่พิมพ์ ... wtf?
— Ivan Castellanos
4
ตอนนี้ 34 และ 110 :) ลงจอดที่นี่เพราะฉันไม่ทราบวิธีการลบองค์ประกอบหลังจากที่มันหายไป (คุณอาจเดาได้ว่า: ฉันไม่ได้ RTFM)
— orique
4
คำถามจะปรากฏในผลลัพธ์ของ google และฉันอัปโหลดเมื่อฉันพบคำตอบอย่างรวดเร็ว
— Valamas

คำตอบ:

440

ลองสิ่งนี้:

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

ฉันคิดว่าคำพูดคู่ของคุณรอบ ๆonclickทำให้มันไม่ทำงาน :)

แก้ไข : ตามที่ระบุไว้ด้านล่างจาวาสคริปต์แบบอินไลน์เป็นสิ่งที่ชั่วร้ายและคุณควรนำสิ่งนี้ออกจากonclickและย้ายไปยังclick()ตัวจัดการเหตุการณ์ของ jQuery นั่นคือวิธีที่เด็ก ๆ ที่น่าสนใจกำลังทำมันในปัจจุบัน

— เปาโล Bergantino
แหล่งที่มา
24
คุณไม่ควรใช้ JavaScript แบบอินไลน์เพราะจะทำให้ยากต่อการเปลี่ยนแปลงในวิธีที่สอดคล้องกัน
— Nick Berardi
14
ฉันไม่เอาผิดฉันแค่ช่วยคนที่มีปัญหาให้เขา บางครั้งฉันเทศนาฉันเพิ่งตื่นและฉันไม่ได้อยู่ในอารมณ์ "ไมล์พิเศษ" โพสต์ของคุณทำงานได้ดี :)
— Paolo Bergantino
คุณสามารถอธิบายอย่างละเอียดว่าตัวจัดการ onclick นั้นชั่วร้ายได้อย่างไร? เป็นเพราะการบำรุงรักษาหรือมีเหตุผลทางเทคนิคหรือไม่?
— panzi
2
มันคุ้มค่ากับไฟล์ที่แยกต่างหากทุกครั้งที่คุณต้องการ JavaScript หนึ่งบรรทัดบนหน้าเว็บหรือไม่? ฉันคิดว่าอินไลน์มีสถานที่
— Casey
91

คุณควรลองใช้ jQuery ในไฟล์แยกต่างหากไม่ใช่แบบอินไลน์ นี่คือสิ่งที่คุณต้องการ:

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

และนี่คือที่ด้านล่างของหน้าของคุณใน<script>แท็กอย่างน้อยที่สุดหรือในไฟล์ JavaScript ภายนอก

$(".notificationClose").click(function() {
    $("#notification").fadeOut("normal", function() {
        $(this).remove();
    });
});
— Nick Berardi
แหล่งที่มา
ฉันลองสิ่งนี้ แต่ไม่สามารถใช้งานได้ ลิงก์อินไลน์ด้านบนทำงานได้และทั้งสองเหมือนกันในทางปฏิบัติ นี่คือ ... jsfiddle.net/AndyMP/DBrf5
— Andy
1
@Andy: ครั้งแรกของทั้งหมดที่คุณลืมที่จะตั้งห้องสมุดเพื่อ jQuery;) ประการที่สองถ้าคุณใช้มันในเว็บไซต์ของคุณคุณยังต้องห่อมันในและ$(document).ready(function() { });(บน jsFiddle มันเป็น onload ดังนั้นมันจึงเป็นแบบนั้นสำหรับคุณ)
— Nathan
@Nick Berardi เราสามารถทำได้ด้วยการเลื่อนหน้าลงหรือไม่?
— Super Model
55

หากคุณกำลังใช้งานในหลาย ๆ ที่คุณควรเปลี่ยนเป็นปลั๊กอิน

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

แล้ว:

// Somewhere in the program code.
$('div').fadeOutAndRemove('fast');
— Sam Sehnert
แหล่งที่มา
ฉันเป็นเพียงการมองหาวิธีที่จะทำเช่นนี้และสำหรับวัตถุประสงค์ของฉัน "ปลั๊กอิน" วิธีที่ดีกว่าสำหรับผมขอบคุณ
— Harag
30

คุณเคยลองสิ่งนี้หรือไม่?

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

นั่นคือการใช้บริบทนี้ในปัจจุบันเพื่อกำหนดเป้าหมายองค์ประกอบในฟังก์ชั่นด้านในไม่ใช่ ID ฉันใช้รูปแบบนี้ตลอดเวลา - ควรใช้งานได้

— Tamas Czinege
แหล่งที่มา
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
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.