কীভাবে jQuery দিয়ে আস্তে আস্তে একটি উপাদান সরিয়ে ফেলবেন?

178

$target.remove() উপাদানটি সরিয়ে ফেলতে পারে, তবে এখন আমি কিছুটি অ্যানিমেশন বোধের সাথে প্রক্রিয়াটি নীচে নেমে যেতে চাই, কীভাবে এটি করব?

javascript jquery

— মাস্ক
সূত্র

354

$target.hide('slow');

অথবা

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

অ্যানিমেশন চালাতে, তারপরে এটি ডিওএম থেকে সরান

— গ্রেগ
সূত্র

7

.Remove () পদ্ধতিটি খুব নির্দিষ্টভাবে ডিওএম থেকে নোড সরিয়ে দেয়। .Hide () পদ্ধতিটি কেবল প্রদর্শনের বৈশিষ্ট্যটি পরিবর্তন করে তবে তা দৃশ্যমান নয়, তবে এখনও বিদ্যমান।

— মাইকাউইটম্যান

2

@ এনভিল পোস্টারটি জিজ্ঞাসা করেছিল কীভাবে এটি আস্তে আস্তে সরানো যায়। .রেভ () তাৎক্ষণিকভাবে এটি করে।

— পিক্সিলিথ

4

কিকব্যাক $(this).remove()ফাংশনের ভিতরে @pixelearth রাখুন । এটি এর চেয়ে ভাল কাজ করে$target.remove()

— এনভিল

97

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

অথবা

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

সদৃশ: jQuery এ কীভাবে "fadeOut" & "অপসারণ" করবেন?

— 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

আমি পার্টিতে কিছুটা দেরি করেছি, তবে আমার মতো কারও জন্য যা গুগল অনুসন্ধান থেকে এসেছে এবং সঠিক উত্তর খুঁজে পায়নি। এখানে আমাকে ভুল উত্তর দিবেন না, তবে ঠিক তেমনটা নয় যা আমি খুঁজছিলাম, আরও উত্সাহ ছাড়াই, আমি এখানে যা করেছি তা এখানে:

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

আমি আমার মামলার অনুসারে গ্রেগের উত্তরটি পরিবর্তন করেছি এবং এটি কার্যকর হয় works এটা এখানে:

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

— nadula
সূত্র

-4

আপনার মত

$target.hide('slow')

?

— জেরেমি মরগান
সূত্র

1

হ্যাঁ, তবে এনিমেশনের পরেও আমার এটি মুছতে হবে।

— মাস্ক