jQuery: slide in element smoothly?

Question

I'm trying to slide in a element smoothly using jquery.

but for some reason the element doesn't really slide in and the effect is not really smooth at all!

please view the jsfiddle here: http://jsfiddle.net/q7o0p488/1/

and this is my jquery code:

$(function() {
    $('.mypro').hover(function() {
        $(this).children('.overlay').fadeIn('slow');
        $(this).children('.overlayBtns').slideToggle();

      },
      function(){
        $('.overlay').fadeOut();
        $('.overlayBtns').fadeOut('slow');
      }
   );
});

the effect that I am trying to create is basically to slide the red element from top smoothly.

any help would be appreciated.

You could have it rendered (started to fade in) behind an invisible element (one the user doesn't realize is there) even something really small. It seems to smooth out as the change begins to render so if you cover the very first, rocky milliseconds it might bring about the desired result. — CalebB, Feb 27 '15 at 17:44
It's very smooth here on chrome on mac. Perhaps add the z transform trick to get it to render via the gpu, or switch to using css transitions. — Radio, Feb 27 '15 at 17:47

score 2 · Answer 1 · answered Feb 27 '15 at 17:56

2

Try adjusting the slideToggle duration. http://jsfiddle.net/oehzLsvc/

answered Feb 27 '15 at 17:56

Sarath Kn

2,680
19
24

Thanks. I went the CSS way now. – TERO Feb 27 '15 at 17:58

score 1 · Accepted Answer · edited May 23 '17 at 11:56

1

You could do this with css3 if that makes sense for your application. An example of this has been given here.

CSS 3 slide-in from left transition

edited May 23 '17 at 11:56

Community

1
1

answered Feb 27 '15 at 17:48

Bikerdan

124
6

exactly what I was looking for. CSS3 is not supported by old browsers but those users with old browsers need to upgrade as we're in 2015 now lol – TERO Feb 27 '15 at 17:58

score 1 · Answer 3 · answered Feb 27 '15 at 17:53

1

if you want to use Slidetoggle() here

add slow.

Like this

$(function() {
    $('.mypro').hover(function() {
        $(this).children('.overlay').fadeIn('slow');
        $(this).children('.overlayBtns').slideToggle('slow');

      },
      function(){
        $('.overlay').fadeOut();
        $('.overlayBtns').fadeOut('slow');
      }
   );
});

check here http://jsfiddle.net/q7o0p488/2/

answered Feb 27 '15 at 17:53

M.chaudhry

651
1
6
13

Thanks. I went the CSS way now. – TERO Feb 27 '15 at 17:59

jQuery: slide in element smoothly?

3 Answers3