Jquery幻灯片有效宽度为100%

Question

首先，我的问题是：小提琴。我想为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" });
});

更新小提琴

然后，您可以更进一步，在元素悬停时切换动画，如下所示：

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

例琴

Answer 2

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

a, input{
  opacity:0;
}

和JQuery。

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

小提琴

编辑：

根据您的编辑，您可以这样做：

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"});
  });

更新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"});
    }
);

这里.