JQuery के साथ धीरे से एक तत्व कैसे निकालें?

179

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

javascript jquery

— मुखौटा
स्रोत

355

$target.hide('slow');

या

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

एनीमेशन चलाने के लिए, फिर इसे DOM से हटा दें

— ग्रेग
स्रोत

7

.Remove () विधि बहुत विशेष रूप से DOM से नोड निकालती है। .Hide () विधि केवल प्रदर्शन विशेषता को बदलती है जो दृश्यमान नहीं है, लेकिन फिर भी अस्तित्व में है।

— micwwittman

2

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

— Pixearthth 15'17

4

@pixelearth ने $(this).remove()कॉलबैक फ़ंक्शन के अंदर रखा । इससे बेहतर काम करता है$target.remove()

— Envil

98

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

या

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

डुप्लिकेट: jQuery में एक div "fadeOut" और "remove" कैसे करें?

— micahwittman
स्रोत

20

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

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

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

— राहुल
स्रोत

+1 का उत्तर सही होने के लिए जैसा कि ऊपर की टिप्पणियों में मिला है। किसी तरह मुझे भी $(this)दोहराने के बजाय पसंद $targetहै।

— गोयडे

यह ठीक वैसा ही है जैसा मैं स्वीकार किए गए उत्तर की कोशिश करने के बाद चाहता हूं, यह बहुत अच्छा लग रहा है :)

— कैटालिन होहा

17

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

— Zohaib
स्रोत

11

सभी उत्तर अच्छे हैं, लेकिन मैंने पाया कि उन सभी में उस पेशेवर "पॉलिश" की कमी थी।

मैं इस के साथ आया, बाहर लुप्त होती, फिसलने, फिर हटाने:

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

— SharpC
स्रोत

3

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

$(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>

स्निपेट का विस्तार करें

— chebaby
स्रोत

निश्चित रूप से यह बहुत अच्छा लग रहा है के लिए यहाँ अंक। :-)

— शार्प

0

मैंने अपने मामले के अनुरूप ग्रेग के उत्तर को संशोधित किया है, और यह काम करता है। यह रहा:

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

— nadula
स्रोत

-4

आपका मतलब है जैसे

$target.hide('slow')

?

— जेरेमी मॉर्गन
स्रोत

1

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

— मास्क