jQuery के साथ धीरे-धीरे तत्व को कैसे निकालें?

145

$target.remove() तत्व को हटा सकता है, लेकिन अब मैं कुछ महसूस एनीमेशन के साथ प्रक्रिया को कम करना चाहता हूं, इसे कैसे करें?jQuery के साथ धीरे-धीरे तत्व को कैसे निकालें?

स्रोत

2009-11-27 Mask

298

$target.hide('slow');

या

$target.hide('slow', function(){ $target.remove(); });

एनीमेशन चलाने के लिए है, तो डोम

से हटाने

स्रोत

2009-11-27 07:09:39 Greg

.remove() विधि बहुत विशेष रूप से डोम से नोड को हटा देता है। .hide() विधि केवल प्रदर्शन विशेषता को बदलने के लिए परिवर्तित नहीं होती है, लेकिन अभी भी अस्तित्व में है। – micahwittman

$ (यह) .remove() बेहतर काम करता है। – Envil

@ एनील पोस्टर ने धीरे-धीरे इसे कैसे निकाला है। .remove() यह तुरंत करता है। – pixelearth

target.fadeOut(300, function(){ $(this).remove();});

या

$('#target_id').fadeOut(300, function(){ $(this).remove();});

डुप्लिकेट: How to "fadeOut" & "remove" a div in jQuery?

स्रोत

2009-11-27 07:06:56 micahwittman

-3

आप

$target.hide('slow')

की तरह मतलब है?

स्रोत

2009-11-27 07:10:41

से बेहतर काम करता है हां, लेकिन मुझे एनीमेशन के बाद इसे हटाने की भी आवश्यकता है। – Mask

यदि आपको छिपाने की आवश्यकता है और फिर तत्व को हटाएं तो विधि को छुपा विधि के कॉलबैक फ़ंक्शन के अंदर निकालें विधि का उपयोग करें।

यह काम करना चाहिए

$target.hide("slow", function(){ $(this).remove(); })

स्रोत

2009-11-27 07:13:04 rahul

+1 उत्तर देने के लिए उत्तर के रूप में सही है। किसी भी तरह से मुझे '$ लक्ष्य' को दोहराने के बजाय '$ (this)' भी पसंद है। – goodeye

आप निकालना विधि कॉल करने से पहले एक एनीमेशन का उपयोग करने की जरूरत है।

देखें: jQuery slideUp().remove() doesn't seem to show the slideUp animation before remove occurs

स्रोत

2009-11-27 07:13:54 Jonathan

$('#ur_id').slideUp("slow", function() { $('#ur_id').remove();});

स्रोत

2013-07-01 07:09:20 zohaib

मैं अपने मामले सूट करने के लिए ग्रेग के जवाब संशोधित कर लिया है, और यह काम करता है। यहां यह है:

$("#note-items").children('.active').hide('slow', function(){ $("#note-items").children('.active').remove(); });

स्रोत

2014-09-22 23:42:27 nadula

सभी उत्तरों अच्छे हैं, लेकिन मुझे पता चला कि उनमें से सभी को उस पेशेवर "पॉलिश" की कमी है। मैं इस के साथ आया था, बाहर fading, ऊपर की ओर स्लाइड, तो को हटाने:

$target.fadeTo(1000, 0.01, function(){ 
    $(this).slideUp(150, function() { 
     $(this).remove(); 
    }); 
});

स्रोत

2017-09-29 19:05:25 SharpC

मैं पार्टी के लिए देर से थोड़ा हूँ, लेकिन मेरे जैसे किसी को भी है कि एक गूगल खोज से आया है और सही उत्तर नहीं मिलता के लिए । मुझे गलत मत करो वहाँ अच्छा जवाब यहाँ हैं, लेकिन वास्तव में क्या नहीं मैं आगे की हलचल के बिना, के लिए देख रहा था, यहाँ मैं क्या किया है:

$(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-4.css 
 
*/ 
 

 
.removed-item { 
 
    -webkit-animation: removed-item-animation .6s cubic-bezier(.55,-0.04,.91,.94) forwards; 
 
    -o-animation: removed-item-animation .6s cubic-bezier(.55,-0.04,.91,.94) forwards; 
 
    animation: removed-item-animation .6s cubic-bezier(.55,-0.04,.91,.94) forwards 
 
} 
 

 
@keyframes removed-item-animation { 
 
    from { 
 
     opacity: 1; 
 
     -webkit-transform: scale(1); 
 
     -ms-transform: scale(1); 
 
     -o-transform: scale(1); 
 
     transform: scale(1) 
 
    } 
 

 
    to { 
 
     -webkit-transform: scale(0); 
 
     -ms-transform: scale(0); 
 
     -o-transform: scale(0); 
 
     transform: scale(0); 
 
     opacity: 0 
 
    } 
 
} 
 

 
@-webkit-keyframes removed-item-animation { 
 
    from { 
 
     opacity: 1; 
 
     -webkit-transform: scale(1); 
 
     transform: scale(1) 
 
    } 
 

 
    to { 
 
     -webkit-transform: scale(0); 
 
     transform: scale(0); 
 
     opacity: 0 
 
    } 
 
} 
 

 
@-o-keyframes removed-item-animation { 
 
    from { 
 
     opacity: 1; 
 
     -o-transform: scale(1); 
 
     transform: scale(1) 
 
    } 
 

 
    to { 
 
     -o-transform: scale(0); 
 
     transform: scale(0); 
 
     opacity: 0 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
</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://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
</body> 
 
</html>

स्रोत

2017-10-07 23:13:37 chebaby

jQuery के साथ धीरे-धीरे तत्व को कैसे निकालें?

उत्तर

संबंधित मुद्दे