surfbird0713 surfbird0713 - 1 year ago 98
jQuery Question

How can I make a div horizontally slide in?

I currently have a div appearing on hover, but it just pops up rather than sliding in: http://jsfiddle.net/Adk8r/4/

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: http://jsfiddle.net/jPneT/1/

Any help would be appreciated. I've tried reading several JavaScript articles online but they're over my head right now :(

Answer Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download