jQuery로 요소를 천천히 제거하는 방법은 무엇입니까?

179

$target.remove() 요소를 제거 할 수 있지만 이제는 느낌 애니메이션으로 프로세스를 중단하고 싶습니다. 어떻게해야합니까?

javascript  jquery 
— 마스크
소스

답변:

355 
$target.hide('slow');

또는

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

애니메이션을 실행 한 다음 DOM에서 제거

— 그렉
소스
7
.remove () 메소드는 DOM에서 노드를 매우 구체적으로 제거합니다. .hide () 메소드는 표시 속성이 변경되지 않고 여전히 존재하도록 변경합니다.
— micahwittman
2
@Envil 포스터에서 천천히 제거하는 방법을 물었습니다. .remove ()는 즉시 수행합니다.
— pixelearth
4
@pixelearth $(this).remove()는 콜백 함수 안에 넣습니다 . 그보다 더 잘 작동$target.remove()
— Envil
20

요소를 숨기고 제거한 다음 hide 메소드의 콜백 함수 내부에서 remove 메소드를 사용하십시오.

이 작동합니다

$target.hide("slow", function(){ $(this).remove(); })
— 라훌
소스
위의 의견이 얻은대로 답변을 얻은 +1. 어떻게 든 $(this)반복하는 대신 어쨌든 좋아합니다 $target.
— goodeye
이것은 내가 허용 대답을 시도 후 내가 원하는, 그것은 :) 많이 부드러워 보이는 정확히
— CATALIN Hoha을
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>
스 니펫 확장

— 아기
소스
확실히 멋지게 보이기 위해 여기를 가리 킵니다. :-)
— SharpC
0

내 경우에 맞게 Greg의 답변을 수정했으며 작동합니다. 여기있어:

$("#note-items").children('.active').hide('slow', function(){ $("#note-items").children('.active').remove(); });
— 나 툴라
소스
-4

당신은 같은 의미 

$target.hide('slow')

?

— 제레미 모건
소스
1
예, 그러나 애니메이션 후에도 삭제해야합니다.
— Mask
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.