jQuery에서 div를“fadeOut”하고“제거”하는 방법은 무엇입니까?

233

이미지를 클릭하면 div에 페이드 아웃 효과를 주거나 div (id = "notification")을 삭제하려고합니다.

이것이 내가하는 일입니다.

<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가 작동하지 않는다고 생각합니다 . :)

편집 : 아래에서 지적했듯이 인라인 자바 스크립트는 악의적이므로 아마도 이것을 꺼내 onclickjQuery의 click()이벤트 핸들러 로 이동해야 합니다. 이것이 요즘 멋진 아이들이하는 일입니다.

— 파올로 베르 간 티노
소스
24
일관된 방식으로 변경하기 어렵 기 때문에 JavaScript 인라인을 사용해서는 안됩니다.
— Nick Berardi
14
나는 그것을 용납하지 않고, 단지 그의 문제로 그 사람을 돕고 있습니다. 때때로 나는 설교하고, 깨어 났으며, "여분의 마일"분위기에 있지 않습니다. 그래도 귀하의 게시물이 작업을 수행합니다. :)
— Paolo Bergantino
onclick 핸들러가 악한 방법에 대해 자세히 설명해 주시겠습니까? 유지 관리 성 때문일까요 아니면 기술적 이유가 있습니까?
— panzi
2
페이지에서 한 줄의 JavaScript를 원할 때마다 별도의 파일을 사용할 가치가 있습니까? 인라인이 그 자리에 있다고 생각합니다.
— 케이시
91

실제로 jQuery를 인라인이 아닌 별도의 파일로 사용해야합니다. 필요한 것은 다음과 같습니다.

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

그런 다음 페이지 하단의 <script>태그 또는 외부 JavaScript 파일 에 태그가 표시됩니다.

$(".notificationClose").click(function() {
    $("#notification").fadeOut("normal", function() {
        $(this).remove();
    });
});
— 닉 베라 르디
소스
나는 이것을 시도했지만 그것을 작동시키지 못했습니다. 위의 인라인 링크가 작동했으며 두 개는 실제로 동일합니다. 여기는 ... jsfiddle.net/AndyMP/DBrf5
— Andy
1
@Andy : 먼저 라이브러리를 jQuery로 설정하는 것을 잊었습니다.) 둘째, 사이트에서 라이브러리를 사용하는 경우 $(document).ready(function() {및 을 래핑해야합니다 });. (jsFiddle에서 그것은 onload이므로 당신을 위해 그렇게합니다)
— Nathan
@Nick Berardi, 페이지 다운 스크롤로 할 수 있습니까?
— 슈퍼 모델
55

여러 곳에서 사용하는 경우 플러그인으로 바꿔야합니다.

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

그리고:

// Somewhere in the program code.
$('div').fadeOutAndRemove('fast');
— 샘 세 너트
소스
나는 단지 이것을하는 방법을보고 있었고, 나의 목적 상, "플러그인"방식이 나에게 더 낫다
— Harag
30

이것을 시도 했습니까?

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

즉, 전류를 사용하여 인 이 상기 내부 소자의 기능이 아닌 ID를 대상 컨텍스트. 나는이 패턴을 항상 사용합니다-작동해야합니다.

— 타마스 치지 네
소스
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>
스 니펫 확장

— 아기
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.