CODEWITHSUNDEEP
javascriptjqueryhtmlcss
MyNewName
MyNewName

Reputation: 1055

Jquery slide in effect 100% width

First, here is my problem: jsfiddle. I want to set a fixed width to the login Container. When I hover it, the login container should get 100% width. It's working fine, but I don't want to see the content of the container. The content should be shown when the container slides in. How can I fix this problem? 

$(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>

Here is an example:

First.

enter image description here

When hover the container it slides in.

enter image description here

Upvotes: 1

Views: 923

Answers (3)

Arman Ozak
Arman Ozak

Reputation: 2344

Add a fixed height to the div#login and use hover for a nice in and out effect:

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 Fiddle here.

Upvotes: 0

ketan
ketan

Reputation: 19341

You can set opacity like following:

a, input{
  opacity:0;
}

And JQuery.

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

Fiddle

Edit:

As per you edit you can do following way:

CSS:

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

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

And JQuery:

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

Updated Fiddle

Second method is also implemented by @RoryMcCrossan.

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

Given your comment defining what you want to actually do:

I don't want to see the content. The content of the container should slide in.

You can achieve this by keeping the div at 100% width and animating it's left position. Try this:

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

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

Updated fiddle

You could then take this one step further and toggle the animation when the element is hovered in and out, like this:

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

Example fiddle

Upvotes: 4

Related Questions