javascript onclick fade div in (短代码)答案

【问题标题】：javascript onclick fade div in (short code)javascript onclick fade div in (短代码)
【发布时间】：2010-11-30 18:54:05
【问题描述】：

我找遍了整个地方，却找不到确切的目标。

html结构基本是这样的。

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

css 结构是。

#us {display:none}

我想要这样当点击“链接”时，div“us”从 dipslay:none 改变；显示：块，以优雅的淡入淡出尽可能少的代码行，然后在单击链接时再次切换回显示：隐藏。

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

感谢您的宝贵时间

【问题讨论】：

标签： javascript jquery html toggle fade

【解决方案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> 的有效子代，因此它可能会在多个浏览器中意外呈现...最好使用正确的标记。

【讨论】：

@AndreKR - 是的，由Paul Irishiirc 添加:)
感谢您，我已经尝试过使用这个以及其他的，但是将其隔离到仅 1 个 div 时遇到了问题。当我单击切换#us 时，它也会切换#twitter 和#contact，即使它们都设置了自己的ID。
@Owen - ID 应该是唯一的，您是否在页面中有多次 id="us"？
不，每个人都有自己的 id（所以是的，它们是独一无二的）但它仍然在切换每个人：非常奇怪
$(document).ready(function() { $("ul li a").click(function() { $("#contact").toggle("fast"); } ); $("ul li a").click(function() { $("#us").toggle("fast"); });});

【解决方案2】：

类似这样的：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

如果 jQuery UI 适合你，我只能推荐它。 jQuery UI 为 jQuery 扩展了许多漂亮的效果：

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

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

【讨论】：

是的，但是看看所有漂亮的效果！ :-)

【解决方案5】：

感谢大家的投入！你一直很有帮助！我认为最合适的最后一个 sn-p 来自 Nick。

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

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

【讨论】：