CODEWITHSUNDEEP
javascriptjquery
Nikita Chernykh
Nikita Chernykh

Reputation: 270

How do I add smooth transitions to this script

How do I add smooth transitions when display block and hide: 

$(document).ready(function(){
    $(".userBox").mouseover(function () {
        $(this).find('.inBox').css({ display: "block" });
        $(this).find('.boxDisc').css({ display: "block" });
    $(".userBox").mouseout(function () {
        $(this).find('.inBox').css('display', 'none');
        $(this).find('.boxDisc').css('display', 'none');
    });
  });
});

Because right now it's instant and doesn't look good. Thanks!

Upvotes: 0

Views: 56

Answers (3)

Miguel
Miguel

Reputation: 20633

One way is to use jQuery fading methods:

$(document).ready(function () {
    $(".userBox").mouseover(function () {
        $(this).find('.inBox').stop().fadeIn('fast');
        $(this).find('.boxDisc').stop().fadeIn('fast');
        $(".userBox").mouseout(function () {
            $(this).find('.inBox').stop().fadeOut('fast');
            $(this).find('.boxDisc').stop().fadeOut('fast');
        });
    });
});

Example:

http://jsfiddle.net/L9t4J/

Upvotes: 1

faerin
faerin

Reputation: 1925

using jQuery methods such as show('slow'), hide('slow'), toggle('slow') will make transitions smoother.

http://api.jquery.com/show/

http://api.jquery.com/hide/

http://api.jquery.com/toggle/

Other useful, playful and great methods are .animate() and jQuery ui's slide effects (https://api.jqueryui.com/slide-effect/)

Cheers!

Edit: I was going to write about the fadeIn and fadeOut methods too. But Maurice Perry was quicker to point those out with an example :)

Upvotes: 0

Maurice Perry
Maurice Perry

Reputation: 32831

You could try fadeIn and fadeOut:

$(document).ready(function(){
    $(".userBox").mouseover(function () {
        $(this).find('.inBox').fadeIn(500);
        $(this).find('.boxDisc').fadeIn(500);
    $(".userBox").mouseout(function () {
        $(this).find('.inBox').fadeOut(500);
        $(this).find('.boxDisc').fadeOut(500);
    });
  });
});

Upvotes: 0

Related Questions