how to set div slide down and slide up with jquery?

Question

If news_img hover should be hide top to bottom else news_img show bottom to top. I tried with this. jsfiddle

Answer 1

You can hide #news_img by default:

#news_img{ 
    display: none;
}

and use slideToggle() instead:

$(document).ready(function() {
    $("#news").hover(function(){
        $("#news_img").slideToggle();
    });
});  

Updated Fiddle

Answer 2

Use jQuery .animate() . Try this:

$(document).ready(function() {
    $("#news").hover(function(){
        $('#news_img').animate({
            height: 'toggle'
            }, 290, function() {
        });  
    });      
});

DEMO