Jquery 滑动登录论坛故障

我想弄清楚人们是如何制作这样的东西的：

现在，我已经找到了很多方法来实现这一点，并多次查看脚本，但我不明白它们是如何隐藏登录论坛（或任何幻灯片）的。尽管我对jQuery或JS几乎不在行。我对CSS有一定的了解，但没有达到这个程度（如果CSS3可以做到的话）

有人能告诉我怎么做吗？我不是说随便写一个剧本，我是说我该怎么做。我想了很多方法，但是我想的方法似乎太复杂了，我觉得我想得太多了。这就是我一直在使用jQuery作为参考或尝试使用jQuery来实现它的原因

用户名


密码
#钮扣{
浮动：左；
}
#日志{
浮动：左；
}

我给你提了个建议。希望能有帮助

javascript

$(".myButton").click(function () {

    // Set the effect type
    var effect = 'slide';

    // Set the options for the effect type chosen
    var options = { direction: 'right' };

    // Set the duration (default: 400 milliseconds)
    var duration = this.id;

    $('#log').toggle(effect, options, duration);
});

CSS

HTML

登记
登录
用户名


密码
取消

---

从理论上讲，这应该是可行的，但在当前一代浏览器中，CSS方向转换是混乱的。你可能想搞乱透明度，而不是在纯CSS中滑动

什么应该起作用 不停摆弄

HTML 为什么它不起作用 浏览器支持？我真的不知道。如果有人有任何建议，请随时提出

可供替代的 不停摆弄

CSS（HTML相同） 为什么有效 浏览器支持？老实说，它做了它应该做的，并且以幻灯片的方式工作

笔记

---

铬合金支持滑动过渡，直到容器宽度的90%左右。然后事情变得很奇怪。如果Chrome是您的目标浏览器，您可以使用第一个示例，使用

左边距：90%

和过渡不透明度来保持细节。IE和Firefox似乎在任何方面都表现得很怪异。

对不起我的愚蠢，但我怎么知道如何添加更多变量呢？我想添加var hide还是？为什么要将z-index设置为-45/45？为什么那么远？只是做笔记，没有具体的原因。一项指标应低于另一项指标；这些数字完全是任意的。我真的没有z指数的标准，所以请品尝。

$(".myButton").click(function () {

    // Set the effect type
    var effect = 'slide';

    // Set the options for the effect type chosen
    var options = { direction: 'right' };

    // Set the duration (default: 400 milliseconds)
    var duration = this.id;

    $('#log').toggle(effect, options, duration);
});

.wrapper {
  width:500px;
  height:500px;
  margin:0px auto;
  border:1px solid #000;
  margin-top:50px;
}
.buttons {
  float:left;
  width:500px;
  height:100px;
  margin-top:200px;
  border-bottom:1px solid #000;
  border-top:1px solid #000;
}
.register {
  float:left;
  width:250px;
  height:100px;
  line-height:100px;
  font-size:18px;
  font-weight:bold;
  text-align:center;
}
.login {
  float:left;
  width:250px;
  height:100px;
  line-height:100px;
  font-size:18px;
  font-weight:bold;
  text-align:center;
}
#log {

  float:left;
  color:Green;
    background-color:#eee;
    border:2px solid #333;
    display:none;
    text-align:justify;
 z-index:2;
  position:absolute;
  width:500px;
  height:500px;
}

<div class="wrapper">
  <div class="buttons">
    <div class="register">Register</div>
    <div class="login">
    <button id="slow" class="myButton">Login</button>
    </div>
  </div>
  <div id="log">
    Username
    <input type="text" name="username">
    <br>
    Password
    <input type="text" name="username">
     <button id="fast" class="myButton">Cancel</button> 
  </div>
</div>

<div id="wrapper">
  <div id="buttons">
    <a href="#" class="regLink">Register</a>
    <a href="#log" class="regLink">Login</a>
  </div>
  <div id="log">
    Username
    <input type="text" name="username">
    <br>
    Password
    <input type="text" name="username">
  </div>
</div> 

div{
    width:300px;
    height:200px;
    overflow:hidden;
    margin-left:0;
    position:absolute;
    background-color:white;
    display:block;
    opacity:1;
}
#log {
    margin-left:300px;
    opacity:0;
    transition:margin-left 1s, opacity  .5s;
}
#log:target{
    margin-left:0;
    opacity:1;
}

div{
    width:300px;
    height:200px;
    overflow:hidden;
    margin-left:0;
    position:absolute;
    background-color:white;
    display:block;
    opacity:1;
}
#log {
    opacity:0;
    z-index:-45;
    transition:opacity  .5s;
}
#log:target{
    z-index:45;
    opacity:1;
}