组合两个jQuery悬停脚本

Question

对于一个文件夹，我创建了一个带有图片的条目和带有附加潜文的标题。当鼠标悬停在图像上时，图像会从灰度变为彩色(css图像替换)。当鼠标悬停在标题上时，它会向上滑动并显示一个潜台词。

我想把这两个函数结合起来。当我将鼠标悬停在条目上的任何位置时，我会将图片从灰度变为彩色，并将潜台词向上滑动。

我设置了一个JSfiddle：http://jsfiddle.net/blendwerk/q8HtS/

我怎样才能达到我的目标。我很高兴能得到任何帮助。

Answer 1

http://jsfiddle.net/q8HtS/3/

您只需要在整个区域上附加带有图片和文本的鼠标事件，为了确保重新绑定事件，您可以设置一个命名空间，以便在将来单独重新绑定它们。

Answer 2

尝试只向包装div添加一个悬停事件，如下所示

http://jsfiddle.net/C8yV7/

注意:您可能还需要限制div的大小，当前大小为页面宽度的100%

Answer 3

以下是所需的效果：

$(function() {
    $(".fadeimg").find(".spanimg").hide();
    $(".fadesub").find(".spansub").hide();

    $(".fadeimg").hover(
        function(){
            $(this).find(".spanimg").stop(true, true).fadeIn(1000);
            $(this).next().find(".spansub").stop(true, true).slideDown(500);
        },
        function(){
            $(this).find(".spanimg").stop(true, true).fadeOut(1000);
            $(this).next().find(".spansub").stop(true, true).slideUp(500);
        }
    );
     $(".fadesub").hover(
         function() {
            $(this).find(".spansub").stop(true, true).slideDown(500);
            $(this).prev().find(".spanimg").stop(true, true).fadeIn(1000);
         }, 
         function() {
            $(this).find(".spansub").stop(true, true).slideUp(500);
            $(this).prev().find(".spanimg").stop(true, true).fadeOut(1000);
         }
     );
});