Question

51

How can I make a div horizontally slide in?

rated 0 times [ 54] [ 3] / answers: 1 / hits: 33356 / 12 Years ago, mon, july 30, 2012, 12:00:00

I currently have a div appearing on hover, but it just pops up rather than sliding in:

#home-heroImage{

  padding: 0px;

  margin: 0px auto;

  width:980px;

  height: 525px;

  position: relative;

  z-index: 1;

  background-color: #fcba2e;

}



#home-hero-pop{

  background-color: #ffffff;

  opacity:0.8;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";

  filter: alpha(opacity=80);

  font: 16px Helvetica,Arial,sans-serif;

  font-weight: bold;

  color: #6d6e70;

  text-align: left;

  padding: 10px;

  position: absolute;

  right: 0px;

  top: 0px;

  height: 505px;

  width: 460px;

  z-index: 2;

}

Fiddle.

After looking through the posts on SO, I found this example, which would work if I could get it to slide in from the right instead of the bottom. I don't know much about JavaScript or jQuery so the modifications I've tried to make to this code are not producing the desired effect:

$(document).ready(function(){

    $('.up-down').mouseover(function(){

        $('.default').stop().animate({

            height: 0    

        }, 200);                        

    }).mouseout(function(){

        $('.default').stop().animate({

            height: 200 

        }, 200)    

    })



});

Fiddle.

I've tried reading several JavaScript articles online but they're over my head right now.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

josh

Add To Favorites

Follow

Total Points: 391

Total Questions: 112

Total Answers: 90

Location: Aruba

Member since Fri, Jun 24, 2022

2 Years ago

josh questions

1 How to create an animated smooth sticky header in react

Wed, Aug 4, 21, 00:00, 3 Years ago

1 Chart.js Error: You may need an appropriate loader to handle this file type

Tue, Apr 13, 21, 00:00, 3 Years ago

1 expo start' or 'npm start' command stuck at ''Starting metro bundler

Sat, Feb 20, 21, 00:00, 3 Years ago

1 Antd clear form after submit in reactjs

Mon, Aug 24, 20, 00:00, 4 Years ago

1 Comparing text values in Cypress

Wed, Aug 12, 20, 00:00, 4 Years ago

View All

answered 12 Years ago nikhilc · Accepted Answer

Based on the example you give, here's it sliding in from the right.. is this what you are after? http://jsfiddle.net/jPneT/208/

EDIT 2017

Too much jQuery

You're right, here's a CSS alternative

.left-right {

    overflow:hidden;

    height:200px;

    width:200px;

    position:relative;

    background-color:#333;

}

.slider {

    width:200px;

    height:200px;

    position:absolute;

    top:0;

    right:-200px;

    background-color:#000;

    color:#fff;

    transition:0.4s ease;

}



.left-right:hover .slider {

  right:0;

}

<div class=left-right>

  <div class=slider>Welcome !</div>

</div>