显示隐藏div的Jquery FadeTo

Question

我想要像http://www.findawayworld.com/一样的效果，当你将鼠标移到任何框上时。

下面是我的代码：

    jQuery('.category-image-block').mouseover(function() {
                jQuery(this).stop().fadeTo(400, 0.9);
                jQuery(this).children(".category-image-block     div").stop().fadeTo(400, 1);


        });
        jQuery('.category-image-block').mouseout(function() {
            jQuery(this).stop().fadeTo(400, 1.0);
            jQuery(this).children(".category-image-block div").hide();
        });

        jQuery(".category-image-block div").hide();

效果正在到来，但没有给出适当的效果。

我的div类为'category- image -block‘，包含image和另一个隐藏的div类为’‘contenthover’。隐藏的div有带文本的p标签。使用上面的代码，当我将鼠标移到p标签上时，会有一些闪烁(不到1秒)。效果不像它应该的那样平滑。有什么建议吗？

Answer 1

下面是我解决这个问题的方法：

http://jsfiddle.net/6WSNq/8/

拥有一个内部的div，这对于category-image-block来说是绝对的，这使得这个效果更容易获得。

问候

Answer 2

我会这样做：

$('.category-image-block').on('mouseenter mouseleave', function() {
    $(this).children(".category-hover-block").stop(true, true).fadeToggle(400);
});

FIDDLE