1

这是一个与另一个成员先前的问题相关的问题，可以在此处找到。

这是隐藏 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

4

4 回答 4

0

A popular choice for this would be JQuery UI's effect method. With this, you can write some very simple Javascript to hide your div in a stylish manner, for example:

function hide(obj) {

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

}

EDIT: Here's an example jsFiddle

于 2013-04-02T13:22:39.813 回答
0

使用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);

    });
});
于 2013-04-02T13:27:41.257 回答
0 
$("#"+el).fadeOut(500);//el must be the id of the element
于 2013-04-02T13:20:15.130 回答
0

如果你使用 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 树上向上移动两个元素到 (with .parent().parent())，然后将其淡出。

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

$(document).ready(function() {
    //Click function here
});
于 2013-04-02T13:18:43.950 回答