如何执行：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);

    });
});