Question

我一直在寻找所有地方，并且无法找到确切的地方。

html结构基本上就是。

<ul> 
   <li><a href="">link</a></li>
   <div id="us">hidden info</div>
</ul>

css结构是。

#us {display:none}

我喜欢它，所以当点击“链接”时，div“us”从dipslay改为：none;显示：阻止，在尽可能小的代码行中优雅地淡入淡出，然后在单击链接时再次切换回显示：隐藏。

我知道有很多东西可以做到这一点，但我真的在寻找代码中的简单性。

感谢你的时间x

Answer 1

你可以使用持续时间.toggle()（适用于所有jQuery版本），如下所示：

$("ul li a").click(function() { $("#us").toggle("fast"); });

或者，如果您使用的是jQuery 1.4.4+，请使用.fadeToggle()，如下所示：

$("ul li a").click(function() { $("#us").fadeToggle(); });

但请注意，<div>不是<ul>的有效子项，因此可能会在多个浏览器中意外渲染...最好使用正确的标记。

Answer 2

这样的事情：

$("#idfortheanchor").bind("click", function() {
    if ($("#us").is(":visible")) {
        $("#us").hide();
    } else {
        $("#us").show();
    }
});

Answer 3

由于jQuery核心没有淡入淡出，我会使用：

$('a').toggle(
    function() { $('#us').fadeIn(); },
    function() { $('#us').fadeOut(); }
);

Answer 4

如果jQuery UI是您的选项，我只能推荐它。 jQuery UI扩展了jQuery的许多好效果：

show( effect, [options], [speed], [callback] )

但请查看网站本身：http://jqueryui.com/demos/show/

Answer 5

谢谢大家的意见！你一直很有帮助！我认为最合适的最后片段来自Nick。

$("ul li a").click(function() { $(this).parent().next().toggle("fast"); });

再次感谢大家！并希望其他人能发现这个有用！ X

javascript onclick淡入淡出div（短代码）

5 个答案: