Question

这个问题与另一位成员的问题有关here。

这是隐藏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'将缓慢关闭。有没有解决这个问题？

非常感谢大家！非常感谢！

注意：我是Javascript的菜鸟。 0-0

Answer 1

如果你正在使用jQuery

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

由于这是由一个事件触发的，'this'变量将被设置为它所来自的元素，因为你希望父元素在被点击时消失，这将有所作为

编辑：为了实现这个目的，您可能需要使用HTML以及需要多少$(this).parent().parent()...，但这将是最好的方法，然后您不需要传递ID

编辑2：所以.parent（）选择包含所选元素的元素，因此在这种情况下，$（this）引用单击的按钮，因为click事件来自该按钮。

所以$（this）.parent（）引用容器元素，在本例中是a元素，因此$（this）.parent（）。parent（）引用{{1}你要隐藏的元素。

所以你可以给图像一个'可关闭'的类，然后执行以下操作

div

这意味着无论何时单击可关闭类的内容，它都会将DOM树上的两个元素（使用$('.closable').click(function() { $(this).parent().parent().fadeOut(); }）向上移动，然后将其淡出。

这将允许您从图像中删除on click事件，您只需要将处理程序放在jQuery document.ready函数中，如下所示：

.parent().parent()

Answer 2

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

Answer 3

一个受欢迎的选择是JQuery UI's effect method。有了这个，您可以编写一些非常简单的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);

    });
});

如何执行：onClick Javascript，隐藏具有过渡效果的div

4 个答案: