Fade in from bottom?

JavaScript
1

The red button on the image above, it shows when the user hover the image. ATM it just appears, no effects or anything, however, I would like it to fade and slide in from let say a position 50px under its current position. How would I do this?

<div class="wrapper">
<div class="overlay">
    <div class="button">BUTTON</div>
</div>
<img />
</div>

.wrapper{
width: 50%;
overflow: hidden;
}

img{
width: 100%;
}

.overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
}

.button{
display: block;
width: 200px;
height: 50px;
margin: 0 auto;
margin-top: 40%;
background: red;
}

Thx in advance!

2

Here is my code ATM: http://jsfiddle.net/eum75/21/

3

Hi,

Use animate instead of fadeIn:

$("button")
  .css('opacity', 0)
  .slideUp('slow')
  .animate(
    { opacity: 1 },
    { queue: false, duration: 'slow' }
);

Code is untested, so may need some tweaking.

Ref: http://stackoverflow.com/questions/5524612/how-to-run-jquery-fadein-and-slidedown-simultaneously

4

Okey thanks, Trying it out but cant get it to work, the opacity 0 and 1 works but there is no fade/slide animation.

5

Hi,

You’re getting there.

You have one syntax error in your code (use the console :))
{'opacity', 1} should be { opacity: 1 }

Also, try replacing slideDown with slideUp and see what happens.

Let me know how you get on.

6

Thanks, working better, still not quit where i want it tho=)

Hmm here is an example of something similair of what i want to do. http://matthewcarleton.com/

When entering the site, the text on the banner fade in from the right, I want to do that but I want it to fade in from bottom.

7

Try this

8

thanks (Y).

Still got some issues do, I need it to have procentual margin-values, as the container use procentual width/height (responsive website). I changed the values in the fiddle to % values and it seem to work sometimes.
Sometimes it works, but sometimes it just fades in, and other times it just appears with no fading or sliding at all.

Do you know what might be the cause?

9

It seems to occur if you hover over the div to start the animation, then move your mouse away from the div before the animation is complete.

Change the mouseout part to this:

$('.button').stop(true, true).css('margin-top', '55%').css('opacity', '0');

and the problem should be solved.

10

Thanks man, working like a charm!

11

You’re welcome :slight_smile:
Thanks for taking the time to report back (it makes a difference).