Jquery滑动效果100％宽度

Question

首先，这是我的问题：jsfiddle。我想为login容器设置固定宽度。当我将鼠标悬停时，login容器的宽度应为100％。它工作正常，但我不想看到容器的内容。容器滑入时应显示内容。如何解决此问题？

$(document).ready(function(){

  $('#login').mouseover(function(){
    $('#login').animate({"width":"100%"});
  });

});

*{
  margin: 0px;
  padding: 0px;
  font-size: 18px;
  font-family: 'Oswald', sans-serif;
}

#login{
  position: absolute;
  top: 50%;
  width: 20px;
  background: rgba(0,0,0,0.45);

  padding: 20px 0px;
  text-align: center;
}

.loginRow{
  visibility: hidden;
  visibility: visible;
}

.loginRow:first-child{
  margin-bottom: 20px;
}

.loginLabel{
  display: inline-block;
  width: 150px;
  text-align: left;

  color: #29333D;
}

.loginInput{
  color: #29333D;
  background-color: transparent;
  border:none;
  border-top: 3px solid transparent;
  border-bottom: 3px solid #8F9F87;
  width: 200px;
}

.loginInput:hover{
  border-bottom-color: #AFB79A;
}

.loginInput:focus{
  border-bottom-color: #AFB79A;
}

.loginInput::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #A9A9A9;
}
.loginInput:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #A9A9A9;
}
.loginInput::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #A9A9A9;
}
.loginInput:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #A9A9A9;
}
.loginInput:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
  color:    #A9A9A9;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="login">
      <div class="loginRow">
        <a class="loginLabel">Benutzername</a>
        <input class="loginInput" type="text" placeholder="Benutzername"/>
      </div>
      <div class="loginRow">
        <a class="loginLabel">Passwort</a>
        <input class="loginInput" type="password" placeholder="Passwort"/>
      </div>
    </div>

以下是一个例子：

首先

当悬停容器时，它会滑入。

Answer 1

鉴于您的评论定义了您想要实际做的事情：

  

我不想看到内容。容器的内容应该滑入。

您可以通过将div保持在100%宽度并将其设置为left位置来实现此目的。试试这个：

#login{
  left: -98%;
  /* other styles... */
}

$('#login').mouseover(function(){
    $('#login').animate({ "left": "0" });
});

Updated fiddle

然后你可以更进一步，当元素进出时，切换动画，如下所示：

$('#login').hover(function(e) {
    var leftPos = e.type == 'mouseenter' ? '0' : '-98%';
    $('#login').animate({ "left": leftPos });
});

Example fiddle

Answer 2

您可以设置不透明度，如下所示：

a, input{
  opacity:0;
}

和JQuery。

$('#login').mouseover(function(){
    $('#login').animate({"width":"100%"});
    $('a').css("opacity","1");
    $('input').css("opacity","1");
  });

<强> Fiddle

修改

根据您的编辑，您可以采取以下方式：

CSS：

#login{
  position: absolute;
  top: 50%;
  background: rgba(0,0,0,0.45);
  padding: 20px 0px;
  text-align: center;

  left:-95%;
  width: 100%;
}

和JQuery：

$('#login').mouseover(function(){
    $('#login').animate({"left":"0"});
  });

<强> Updated Fiddle

第二种方法也由@RoryMcCrossan实施。

Answer 3

为div#login添加固定高度，并使用hover获得良好的进出效果：

<强> CSS：

#login{
  position: absolute;
  top: 50%;
  width: 20px;
  height: 100px;
  background: rgba(0,0,0,0.45);
  padding: 20px 0px;
  text-align: center;
}

.loginRow{
  display: none;
}

<强> JS：

$('#login').hover(
    function(){
        $('#login .loginRow').stop(true,false).fadeIn(400);
        $('#login').stop(true,false).animate({"width":"100%"});
    },
    function(){
        $('#login .loginRow').stop(true,false).fadeOut(200);
        $('#login').stop(true,false).animate({"width":"20px"});
    }
);

JS小提琴here。