如何執行：onClick Javascript，隱藏具有過渡效果的div

Question

這是與另一個成員的先前問題相關的問題，可以在這里找到。

這是隱藏div的Javascript函數（這是對其他成員問題的解答）：

function hide(obj) {

    var el = document.getElementById(obj);

        el.style.display = 'none';

}

HTML是：

<div id='hideme'>
Warning: These are new products
<a href='#' class='close_notification' title='Click to Close'>
<img src="images/close_icon.gif" width="6" height="6" alt="Close" onClick="hide('hideme')" />
</a>
</div>

我對此的后續問題是：如何添加過渡的酷效果？ 結果將是div“ hideme”將緩慢關閉。 有沒有解決的辦法？

非常感謝大家！ 高度贊賞！

注意：我是Java的新手。 0-0

Answer 1

如果您使用的是jQuery

function hide() {
    $(this).parent().fadeOut();
}

由於這是由事件觸發的，因此“ this”變量將設置為它來自的元素，因為您希望父元素在單擊時消失，所以可以解決問題

編輯：為使此工作，您可能需要使用HTML以及$(this).parent().parent()...多少個，但是這將是最好的方法，然后您就不必不需要傳遞ID

編輯2：所以.parent（）選擇包含所選元素的元素，因此在這種情況下$（this）指的是被單擊的按鈕，因為那是單擊事件的來源。

因此$（this）.parent（）指向容器元素，在這種情況下為a元素，因此$（this）.parent（）。parent（）指向要隱藏的div元素。

因此，您可以為圖片提供“可關閉”類，然后執行以下操作

$('.closable').click(function() {
    $(this).parent().parent().fadeOut();
}

這意味着，每當單擊具有可關閉類的內容時，它將在DOM樹上帶有兩個元素（ .parent().parent() ），然后將其淡出。

這將允許您從圖像中刪除on click事件，您只需要將處理程序放在jQuery document.ready函數中，如下所示：

$(document).ready(function() {
    //Click function here
});

Answer 2

$("#"+el).fadeOut(500);//el must be the id of the element

Answer 3

一個流行的選擇是JQuery UI的effect方法 。 這樣，您可以編寫一些非常簡單的Javascript以時尚的方式隱藏div，例如：

function hide(obj) {

   $(obj).effect("scale");

}

編輯：這是一個示例jsFiddle

Answer 4

使用jQuery進行過渡效果：

$(function(){
    $("a.close_notification").click(function(e){
        e.preventDefault();
        // stop other animations and hide, 500 milliseconds
        // you can use the function fadeOut for that too
        $("#hideme").stop().hide(500);

    });
});