jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了jQuery淡入淡出菜单,类似于Windows XP大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我想要一个菜单​​(选择框更换下拉列表),当点击时,它会淡出,但选定的选项会保持更长时间.正如标题所暗示的那样,它在 Windows XP中看到的所有“时髦”效果都被打开了 – 菜单快速消失,让选定的选项逐渐消失.

我的问题是如何使用jQuery实现它.我可以使用一个选择器来选择父元素除了所选选项之外的所有子元素,但它很混乱;理想情况下,我喜欢淡出容器及其中的所有内容,但能够淡出其中的单个元素,这是从容器动画中排除的.

这是一些示例HTML:

<ul>
    <li>Option</li>
    <li>Option</li>
    <li class="SELEcted">Option</li>
    <li>Option</li>
    <li>Option</li>
</ul>

还有一些伪jQuery:

$(document).ready(function()
{
    $("ul").not("ul li.SELEcted").fadeOut(200);
    $("li.SELEcted").fadeOut(600);
});

如果我还不够清楚,我很抱歉 – 请发表评论,我会尽力改善措辞.

解决方法

为什么不 :)

DEMO (remake)

>抓住所选元素的位置(顶部/左侧):.position()@H_404_34@>获取所选元素的html@H_404_34@>将html复制到临时DIV并将该tiv放在克隆所在的相同位置.@H_404_34@>隐藏选项菜单@H_404_34@>稍后隐藏临时DIV

$(‘.options li’).click(function(){    var thisEl = $(this);    var thisPos = thisEl.position();    $(‘#temp’).css({left:thisPos.left’px’,top:thisPos.top’px’});    $(‘#temp’).html(thisEl.html()).fadeTo(0,1).delay(700).fadeTo(1000,function(){        $( ‘#临时’)空();    });    $( “选项”.)fadeToggle().});

大佬总结

以上是大佬教程为你收集整理的jQuery淡入淡出菜单,类似于Windows XP全部内容,希望文章能够帮你解决jQuery淡入淡出菜单,类似于Windows XP所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。