javascript - How can I make a div horizontally slide in? - Stack Overflow

admin管理员组

文章数量:1202195

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.

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.

• javascript
• jquery
• animation
• hover
• effects

Share Improve this question Follow edited Jul 8, 2021 at 13:37 pizzaisdavid 46933 silver badges1414 bronze badges asked Jul 30, 2012 at 16:28 surfbird0713surfbird0713 1,21922 gold badges2323 silver badges4545 bronze badges 4

• I also created this, but am not sure why it's not working: jsfiddle.net/v5E3M – surfbird0713 Commented Jul 30, 2012 at 16:29
• 2 Invalid markup and all the JavaScript in element attributes? I'll pass – Matt Ball Commented Jul 30, 2012 at 16:32
• Here: jsfiddle.net/TaXj9 (right to left in stead of down to up) – kei Commented Jul 30, 2012 at 16:35
• Thank you kei, I appreciate it. @Matt, I got the idea to put JavaScript in the elements in this forum, I thought it was a strange approach too, but it worked so I went with it. Any feedback on my markup would be appreciated, helps the learning process. – surfbird0713 Commented Jul 30, 2012 at 16:40

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 11

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>

My answer uses no JavaScript. CSS can handle this automatically for you.

Here's a link to a fork of your code as a working example: http://jsfiddle.net/g105b/Adk8r/11/

There is only a little change from your example. Rather than hiding the element and showing it with display property, the element is placed off-screen using right: -480px (where 480 is the cumulative width), and moving it to right: 0 when the mouse hovers.

Using CSS transitions provides the animation, and support is very good now: http://www.caniuse.com/#search=transition

This technique allows all browsers back to IE6 view and use your website, but users with older browsers will not have an enhanced experience. Unless you require the animation - as in, it is a feature for it to animate - I would suggest using CSS transitions to futureproof your website and use web standards.

Users of deprecated browsers deserve a deprecated experience.

Fiddle: http://jsfiddle.net/BramVanroy/Adk8r/10/

As said: please learn to write logical and correct HTML. Your markup is invalid and unlogical. You should perfect your HTML and CSS and then study JavaScript and jQuery rather than trying to get a hang of everything at once. This code is a pain to the eye.

Here's what's wrong:

• Try to avoid large chunks of inline style and JavaScript.
• You use a span where one would use a heading-tag (<h1>Welcome</h1>) and style it via CSS.

• You use line breaks <br /> where one would use paragraphs:

  <p>This div appears on hover but I would like to slide in from the right instead of just appearing.</p>

• There's no structure in your code. This is not necessary to create a working website, but it's good practice to give child elements an indent of two or four spaces. This way, it's very clear for yourself which element is which child or parent. The same is true for your CSS rules: it's better to put your selector first and then the rules (indented) like so:

  h1 {
      font-weight: bold;
      font-size: 160%;
  }
  

• You have a closing </a> tag but there's no opening <a>.

There is a very simple way to do it using css3. instead of going through the hassle of javascript try something like in the CSS:

div.move {
  height: 200px;
  width: 200px;
  background:#0000FF;
  color:#FFFFFF;
  padding:10px;
}

/*on mouse hover*/
div.move:hover {
  /*General*/
  transform:translate(200px,100px);
  /*Firefox*/
  -moz-transform:translate(200px,200px);
  /*Microsoft Internet Explorer*/
  -ms-transform:translate(200px,100px);
  /*Chrome, Safari*/
  -webkit-transform:translate(200px,100px);
  /*Opera*/
  -o-transform:translate(200px,100px);
}

in the HTML:

<div class="move">Anything is here moves!</div>

Also the translate works on an x/y axis.

This is very simple. All you need is HTML, CSS and jQuery.

1. Make a solid div.
2. Make the parent div to hide overflow (overflow:hidden) in CSS.
3. Assign a margin-left of 100% (or some length) that the required div hides away because of margin.
4. Do a jquery animate() function to bring down margin-left to 0 or 0%.
5. You can also set the speed of animation by giving time in ms (milliseconds) or some expression like slow or fast

本文标签： javascriptHow can I make a div horizontally slide inStack Overflow