Javascript 水平滑动横幅设计与设计；功能

我需要显示垂直横幅，一旦用户单击打开按钮/div，它将从屏幕右侧水平滑出，并且应该能够关闭该横幅。基础设计如下图所示

我已经为同样的东西摆好了小提琴

例如：

---

仍然需要改进，这样按钮也可以滑动并带有横幅，以获得平滑的外观

您必须更改css

例如：

/* float */
float:right;

/* absolute position */
position:absolute;

你需要像这样：

---

还是我误解了你的问题？

使用CSS转换和jQuery中的简单切换类，你可以做得更干净、更简单：

$('#button').on('click', function(){
    $('#banner').toggleClass('unfolded');
});

演示：

使用JQ切换类

$('#slider').toggleClass('sliderthing');

---

这加上CSS，使它看起来和东西应该工作得很好

我通过将横幅和按钮包装在另一个包装器中实现了这一点

以下是更新后的示例：

我添加了一些精确的动画，使红色按钮在单击事件时立即隐藏/显示，并带有一些平滑的动画

.wrapper{
  float:right;
  position:absolute;
  right:0;
  z-index:100000;
}

---

也许你想要这样的东西。我认为这是一个好的开始

$（函数（）{
//滑动菜单切换
$（“.banner幻灯片”）。单击（功能（事件）{
var(u slideMenu=$（“#右横幅”）；
如果（_slideMenu.hasClass（“幻灯片打开”））{
$（“#右横幅”）.animate（{“right”：“-190px”}，“slow”）；
$（“#hbanner”）.html（“”）；
}
_slideMenu.toggleClass（“幻灯片打开”）；
});
});
#右横幅{
位置：绝对位置；
右：0；
排名：0；
宽度：210px；
}
.右旗{
宽度：150px；
高度：200px；
背景颜色：绿色；
填充：20px；
浮动：对；
背景颜色：蓝色；
}
#赫班纳{
浮动：左；
背景色：红色；
光标：指针；
}
.包装纸{
浮动：对；
位置：绝对位置；
右：0；
z指数：100000；
}
.内容{
宽度：钙（100%-210px）；
背景色：洋红色；
高度：200px；
浮动：左；
文本对齐：右对齐；
}

这是示例文本
>>
右侧水平滑动div
看起来它工作得很好。我需要修改设计，使按钮也能像图像中显示的那样移动，按钮的文本也从
…我已经更新了小提琴，以更改按钮内的文本，需要修改设计，使按钮显示在横幅的左侧。您需要查看的是，将按钮放在蓝色容器内，并将其设置为绝对位置，将容器设置为相对位置。希望这会有所帮助。您的代码将按钮定位在横幅的左侧，但当横幅关闭时，它不会将红色按钮向右移动，它还应该将红色按钮移动到屏幕的八个位置，如我在问题中发布的图像所示。我也设法做到了这一点。但它仍然需要微调。。
$('#slider').toggleClass('sliderthing');

.wrapper{
  float:right;
  position:absolute;
  right:0;
  z-index:100000;
}