jquery - 如何在带有动画翻转的图像顶部使用jquery在悬停时淡入div

Question

我有以下代码，它在鼠标悬停时在悬停图像中淡入淡出。我还有一个带有一些文本的 div，当图像以相同的速度变化时，我想隐藏然后淡入。我知道如何分别做这两件事，只是不确定如何将其写成一个完整的函数。任何帮助表示赞赏。我想用 jquery 显示隐藏，以便在禁用 javascript 时显示文本。

HTML:

<ul id="img_grid1">
    <li>
        <h2 class="bigimghead">Heading 1</h2>
        <img class="off" src="images/img1.jpg" alt=""/>
        <img class="on" src="images/img1over.jpg" alt=""/>
        <div class="copy">
            <p>some text, some text</p>
        </div>
    </li>

</ul>

CSS:

h2.bigimghead {
    font-family: Tahoma, Geneva, sans-serif;
    position: relative;
    z-index: 2000;
    font-size: 16px;
    top: 10px;
}

img.off {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1000;
}

img.on {
    position: absolute;
    left:0; 
    top: 0;
}

ul#img_grid1 li {
    list-style-type: none;
}

.copy { z-index: 5000; position: relative; width: 200px; top: 20px; }

.copy p { color: #FFF; }

jquery:

 $(document).ready(function(){
$(function(){
   $(".copy").css("display","none")
});

$("img.off").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "normal");
$(".copy").fadeIn(500);
},
function() {
$(this).stop().animate({"opacity": "1"}, "normal");
$(".copy").fadeOut(500);
});
});

Answer 1

如果你想以与图像相同的速度淡出文本，这里有两个选项

图像悬停方法 ( jsfiddle )

此方法类似于您现有代码中的方法，只是在开头添加了通过不透明度隐藏所有复制 div。

$(document).ready(function () {
    $('.copy').css("opacity", "0");
    $("img.off").on({
        mouseenter: function () {
            $(this).stop().animate({
                "opacity": "0"
            }, "normal");
            $('.copy').stop().animate({
                "opacity": "1"
            }, "normal");
        },
        mouseleave: function () {
            $(this).stop().animate({
                "opacity": "1"
            }, "normal");
            $('.copy').stop().animate({
                "opacity": "0"
            }, "normal");
        }
    });
});

列表项悬停方法 ( jsfiddle )

此方法假定您希望在单击整个列表项而不是仅单击图像时出现动画。这将确保如果您碰巧将鼠标悬停在绝对位于图像上方的任何元素上(例如标题或复制文本)，mouseleave 处理程序将不会触发。

$(document).ready(function () {
    $('.copy').css("opacity", "0");
    $("#img_grid1").on({
        mouseenter: function () {
            $(this).find("img.off").stop().animate({
                "opacity": "0"
            }, "normal");
            $('.copy').stop().animate({
                "opacity": "1"
            }, "normal");
        },
        mouseleave: function () {
            $(this).find("img.off").stop().animate({
                "opacity": "1"
            }, "normal");
            $('.copy').stop().animate({
                "opacity": "0"
            }, "normal");
        }
    }, "li");
});

注意:在这两个示例中，我都为图像添加了一些额外的样式，因此它们在没有源文件的情况下也可见。