CODEWITHSUNDEEP
jquery
TERO
TERO

Reputation: 159

jQuery: slide in element smoothly?

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.

Upvotes: 1

Views: 301

Answers (3)

Sarath Kn
Sarath Kn

Reputation: 2735

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

Upvotes: 2

M.chaudhry
M.chaudhry

Reputation: 651

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/

Upvotes: 1

Bikerdan
Bikerdan

Reputation: 99

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

Upvotes: 1

Related Questions