Question

现在它只是在悬停时显示。是否可以使隐藏部分缓慢显示？我使用一张图片，悬停显示全尺寸的图片。

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')
    });

小提琴： http://jsfiddle.net/r8FPh/

Answer 1

如评论中所述，您肯定需要使用jquery中的animate函数。这不是完整的代码，但它可以帮助您了解如何执行此操作以及其工作。

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

    });

DEMO

Jquery动画文档：http://api.jquery.com/animate/

Answer 2

您是否有特定原因使用溢出来隐藏和显示这些？为什么不使用jQuery动画？

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

或者，如果这不是你想要的，你可以使用jQuery动画来模拟通过扩展/缩回父div的高度/宽度而隐藏的溢出行为？

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

同时输入/复制粘贴jQuery一直很乏味，有几种方法可以使用它。

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

或

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

或

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

就像例子一样，你也可以使用闭包等。

Answer 3

$(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

悬停时缓慢显示

3 个答案: