如何在jquery中打开窗帘并将其淡出？_Jquery

如何在jquery中打开窗帘并将其淡出？

jquery

如何在jquery中打开窗帘并将其淡出？,jquery,Jquery,我目前正在为一个客户设计一个网站。她希望她的名字在屏幕中央，当用户点击她的名字时；她希望自己的名字像窗帘一样打开，淡出，而一张照片和一份菜单淡入她希望自己的名字向左移动并逐渐消失；同时，她的姓氏向右移动并逐渐消失不久之后，一张带有菜单的图片淡入淡出感谢您提供的任何帮助。这是一个使用绝对定位的快速而肮脏的第一个版本，尽管我相信您可以使用位置：相对，但只是为了展示总体思路（）： HTML: 我不确定你所说的“像窗帘”是什么意思。这可能意味着图像从中间剪掉，然后两个部分从接触的底角剥离，但也

我目前正在为一个客户设计一个网站。她希望她的名字在屏幕中央，当用户点击她的名字时；她希望自己的名字像窗帘一样打开，淡出，而一张照片和一份菜单淡入

她希望自己的名字向左移动并逐渐消失；同时，她的姓氏向右移动并逐渐消失

不久之后，一张带有菜单的图片淡入淡出

感谢您提供的任何帮助。

这是一个使用绝对定位的快速而肮脏的第一个版本，尽管我相信您可以使用

位置：相对

，但只是为了展示总体思路（）：

HTML:

我不确定你所说的“像窗帘”是什么意思。这可能意味着图像从中间剪掉，然后两个部分从接触的底角剥离，但也可能意味着这两个部分只是彼此滑动。同样，这也可能意味着文本（她的名字）从底部向上拉。这太模棱两可了。顺便说一下，我忽略了菜单，但类似的东西在我应用于名称的fadeOut（）效果之后出现了。

$(function(){
    $('div').click(function(){
        $('span.first').animate({
            left: '-=50'
        });

        $('span.second').animate({
            left: '+=50'
        });

        $(this).fadeOut();
    });
})();

<html>
<body>
    <div>
        <span class="first">Na</span><span class="second">me</span>
    </div>
</body>
</html>

div {
    position:relative;
    background-color: red;

}
span { position: absolute; font-size: 20px;  }
span.first { left: 50px }

span.second{ left: 73px }