Jquery从右侧加载内容滑入/滑出

Posted 2023-03-06

【中文标题】Jquery从右侧加载内容滑入/滑出

【英文标题】：Jquery Load Content Slide In/Out from Right

【发布时间】：2012-04-23 00:40:10

【问题描述】：

我希望在单击菜单项时，div 会从右向左滑动，并在打开选项时关闭（滑回右侧）

例如：http://www.cortac.com/

有什么想法、演示链接等来完成这个吗？

我发现这个和上面的很接近，但不会从右向左滑动。

http://d2o0t5hpnwv4c1.cloudfront.net/011_jQuerySite/sample/index.html

【问题讨论】：

jQuery - slide right to left?的可能重复

【参考方案1】：

我在这里做了一个非常简单的例子：http://jsfiddle.net/jaketoolson/ukztv/

我将面板设置为绝对定位，右侧设置为等于宽度的负数。

#page 
position: absolute;  
top: 20%;
right: -400px; 
width: 400px;

然后jQuery是一个鼠标悬停（使用点击等）效果，“动画”设置目标css：

$('.link').mouseover(function() 
$('#page').animate('right':'0px', 1500);
).mouseout(function()
$('#page').animate('right': '-800px', 1500););

要让它加载页面，这可以通过 AJAX 或其他方法完成。请参阅我目前正在此处构建的示例：http://jaketoolson.com/ems/index.php

【讨论】：

如果您查看我添加的 EMS 链接上的 jQuery，我会在加载时将“书”滑出（打开），当您单击书外的任何位置时，它会滑入（关闭） .单击两个标签中的任何一个，通过 AJAX 加载该页面并更新标签 css。

【参考方案2】：

8 个月前我问了一个类似的问题，并想出了一个答案......比你问的要复杂一些，但它是我见过的唯一类似的东西......

best approach for jQuery slider with dynamic prev/next content?