如何使用jquery的animate将菜单项动画化为大div(窗口)?

发布于 2024-09-06 07:50:27 字数 288 浏览 3 评论 0原文

我很确定这可以使用 jquery 的 animate api 轻松完成,但我还不够好,无法弄清楚。我想要做的是:

我在视口顶部有一个用户将单击的菜单项。当用户单击它时,您会看到看起来像 div 从菜单中“弹出”并浮动到屏幕上特定位置的内容。当我说弹出时,我并不是指任何花哨的东西 - 我只是指它似乎源自菜单项并定居在我指定的屏幕上的某个位置。但重要的是这个动画发生得非常快。足够快,您不必实际等待窗口出现,但足够慢,以便眼睛看到动画从菜单项开始,最终到达窗口实际出现的新位置,并以指定的方式出现高度和宽度。

希望这一切都有意义吗?

i'm pretty sure this can be done pretty easily with jquery's animate api, but i'm not good enough to figure it out. what i want to do is this:

i have a menu item at the top of the viewport that the user will click on. when the user clicks on it, you'll see something that looks like the div "popping" out of the menu and float to a particular location on the screen. when i say popping i don't mean anything fancy - i just mean it appears to be originating from the menu item and settling somewhere on the screen that i specify. but the important part is that this animation happens really fast. fast enough where you don't have to actually wait for the window to appear, but slow enough so the eye sees the animation start from the menu item and end up at a new location where the window will actually appear, and appear with a specify height and width.

hope that all made sense?

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

扫码二维码加入Web技术交流群

发布评论

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

评论(1

屋檐 2024-09-13 07:50:27
jQuery('#someelement').css({position:'absolute'}).animate({width: 200,height:200, left:'+=500'},1000,function(){}).hide();

宽度/高度使菜单项变大,左侧将其从起始位置移动 500 像素。在函数内部,放置回调以打开窗口。

jQuery('#someelement').css({position:'absolute'}).animate({width: 200,height:200, left:'+=500'},1000,function(){}).hide();

The width/height make the menu item get bigger, and the left moves it 500 pixels from its starting position. Inside the function, place your callback to open the widow.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文