CODEWITHSUNDEEP
jquerycss
Stopper
Stopper

Reputation: 576

Show slowly on hover

Now it's just showing when hover. Is it possible to make hide part showing slowly ? I use one image, on hover that image showing on full size.

jQuery('.on-hover').mouseover(function () {
        jQuery(this).css("overflow", "visible").css("z-index", 999999999).children().css("border", '3px solid');
        jQuery('.category-products').css('overflow', 'visible')
    });
    jQuery('.on-hover').mouseout(function () {
        jQuery(this).css("overflow", "hidden").css("z-index", 10).children().css("border", 'none');
        jQuery('.category-products').css('overflow', 'hidden')
    });

Fiddle: http://jsfiddle.net/r8FPh/

Upvotes: 0

Views: 871

Answers (3)

Abhishek
Abhishek

Reputation: 5728

As stated by comments you definitely need to use animate function from jquery. This is not a full code but it will help you understand how to do it plus its working .

 jQuery('.on-hover').hover(function () {
        jQuery(this).css('overflow', 'visible').animate({height:"100%",width: "100%"}, 1500 );

    });

DEMO

Jquery animate docs: http://api.jquery.com/animate/

Upvotes: 1

Terrence Senthuran
Terrence Senthuran

Reputation: 20

$(document).ready(function(){
    //When mouse rolls over
    $("li").mouseover(function(){
        $(this).stop().animate({width:'250px',height:'150px'},{queue:false, duration:400, easing: 'swing'})
    });

    //When mouse is removed
    $("li").mouseout(function(){
        $(this).stop().animate({width:'150px',height:'30px'},{queue:false, duration:600, easing: 'swing'})
    });
});

http://www.sendesignz.com/index.php/jquery/66-html-5-and-jquery-techniques-to-build-the-webpage

Upvotes: 0

Daniel Waters
Daniel Waters

Reputation: 431

Is there a specific reason you're using overflows to hide and show these? Why not use jQuery animation instead?

jQuery('.category-products').fadeIn(500);
jQuery('.category-products').fadeOut(500);

Or if this isn't what you're after you can use jQuery animation to mimic the behaviour of overflow hidden by expanding/retracting the parent div's height/width?

http://api.jquery.com/animate/

Also typing/copy pasting jQuery all the time is tedious, there's a few ways around having to use that.

jQuery(document).ready(function($)
{
 $('.category-products').fadeIn(500);
});

or 

jQuery(function($){
 $('.category-products').fadeIn(500);
});

or

jQuery(function(){
 $ = jQuery.noConflict();
 $('.category-products').fadeIn(500);
});

just as examples, you can also use closure etc.

Upvotes: 0

Related Questions