Jquery FadeTo显示隐藏的div

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'包含图像和另一个隐藏的div与class'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

Answer 3

这几乎是他们所拥有的一个确切的例子。正如我之前在评论中提到的那样，要特别注意css以及元素在布局中的位置。

  

另外：滚动到这个答案的底部以获得纯CSS解决方案（节省时间和空间）

     

HTML

<div id="parent" class="parent">
    <img id="background" class="background" src="http://www.findawayworld.com/scraps/icecream1-310x180.jpg">
    <div id="child" class="child">
        <h3>Some Title Here</h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi posuere rutrum mollis. Vestibulum iaculis felis a felis interdum dictum. Duis quam ipsum, dictum in mollis nec, bibendum vel mauris.
        </p>
    </div>
</div>​

  

CSS

.parent {
    -moz-border-radius: .5em;
    border-radius: .5em;
    border: 3px groove #33FFFF;
    height: 180px;
    margin: 1em auto;
    position: relative;
    width: 310px;
}
.background {
    left: 0px;
    height: 100%;
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: -1;
}
.child {
    background: #fff;
    display: none;
    height: 100%;
    width: 100%;
    z-index: 1;
}
.child h3 {
    font-size: 1.3em;
    text-align: center;
}
.child p {
    margin: 1em auto;
    padding: 0px 1em;
    text-align: justify;
}

  

jQuery

$(function() {
    $("#parent").hover(function(eIn) {
        $("#child").stop(true, true).fadeIn("slow");
    },
    function(eOut) {
        $("#child").stop(true, true).fadeOut("slow");
    });
});​

  

the jsFiddle

然后

请记住，这个确切的效果可以在css中完全实现，从而为您的javascript创建一个更小的脚注。我将尽快尝试获得CSS2和CSS3示例。

  

PURE CSS SOLUTION

我为这个解决方案使用了相同的jsFiddle（我只是没有将修改后的版本设置为基础，所以你会在修改22下找到它）。因此，如下面的CSS中所述，存在一行异常css。我还评论了JavaScript，以表明它是一个纯CSS解决方案，甚至应该具有一些IE兼容性。

  

CSS（* _仅更改 *）

/* Below used for pure CSS solution */
.child {
    display: block !important; /* simply to override previous css without making change for looking at js version */
    opacity: 0;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
}
.parent:hover .child {
    opacity: 1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)"; /* IE 8 */
    filter:alpha(opacity=100); /* IE 4, 5, 6 and 7 */
}
/* End Solution */

  

the jsFiddle