javascript onclick fade div in (短代码)

发布于 2024-10-05 09:55:16 字数 424 浏览 1 评论 0原文

我到处寻找，但在任何地方都找不到我想要的东西。

html结构基本上就是。

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

CSS结构是。

#us {display:none}

我希望这样当单击“link”时，div“us”从dipslay：none更改为dipslay：none;显示：阻止，以尽可能少的代码行优雅地淡入淡出，然后在单击链接时再次切换回显示：隐藏。

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

谢谢你的时间x

原文

i'm been lookin all over the place and cannot find exactly what im after anywhere.

the html structure is basically.

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

the css structure is.

#us {display:none}

I'd like it so when "link" is clicked the div "us" is changed from dipslay:none; to display:block, in a graceful fade in as little lines of code as possible, and then again when the link is clicked its toggled back to display:hidden.

I'm aware that there are lots of things that can do this, but im really lookin for that simplicity in code.

thanks for your time x

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

壹場煙雨 2024-10-12 09:55:16

您可以只使用 .toggle() 和持续时间（适用于所有 jQuery 版本），例如或者，

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

如果您使用的是 jQuery 1.4.4+，请使用 .fadeToggle()像这样：

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

但请注意，

不是

You can just use .toggle() with a duration (works in all jQuery versions), like this:

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

Or, if you're on jQuery 1.4.4+, use .fadeToggle() like this:

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

Note though, a <div> isn't a valid child of <ul>, so it may render unexpectedly in several browsers...it'd be better to use proper markup.

回复收藏 0 原文

半岛未凉 2024-10-12 09:55:16

像这样的东西：

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

Something like this:

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

回复收藏 0 原文

回心转意 2024-10-12 09:55:16

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

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

As there is no fade-toggle in the jQuery core, I'd use:

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

回复收藏 0 原文

生寂 2024-10-12 09:55:16

如果 jQuery UI 适合您，我只能推荐它。
jQuery UI 扩展了 jQuery，具有许多不错的效果：

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

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

If jQuery UI is an option for you, I can only recommend it.
jQuery UI extends jQuery with many nice effects:

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

But check out the website itself: http://jqueryui.com/demos/show/

回复收藏 0 原文

锦欢 2024-10-12 09:55:16

感谢大家的意见！你很有帮助！我使用的最后一个我认为最合适的片段来自尼克。

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

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

thank you everybody for your input! You've been very helpful! The final snippet I've used which i deemed most appropriate was from Nick.

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

so thanks again everybody! and hope someone else can find this useful! x

回复收藏 0 原文

~没有更多了~

关于作者

歌枕肩

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

javascript onclick fade div in (短代码)

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（5）

关于作者

相关话题

热门标签

推荐作者

lioqio

Single

禾厶谷欠

alipaysp_2zg8elfGgC

qq_N6d4X7

放低过去

友情链接

javascript onclick fade div in (短代码)

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（5）

关于作者

相关话题

热门标签

推荐作者

lioqio

Single

禾厶谷欠

alipaysp_2zg8elfGgC

qq_N6d4X7

放低过去

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。