0

我有以下代码在悬停时淡入翻转图像。我还有一个带有一些文本的 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);
});
});
4

2 回答 2

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

注意：在这两个示例中，我都为图像添加了一些额外的样式，以便在没有源文件的情况下可以看到它们。

于 2013-02-08T10:34:57.780 回答
1

首先，您在absolute图像上设置位置，但 li 没有相对位置。

其次，我认为您应该在再次执行之前检查事件是否已完成：

  • 添加一些delay(500)以防止另一个事件实现（例如延迟应该等于动画时间fadeIn(500)）

  • 添加一个变量来告诉事件是否像这样完成：

    $(document).ready(function(){
    var eventIsRunning = false;
    $("img.off").hover(
        function() {
            if(!eventIsRunning) {
                eventIsRunning = true;
                $(this).fadeIn();
                $('.copy').fadeOut();
                eventIsRunning = false;
            }

        },function() {
            if(!eventIsRunning) {
                 eventIsRunning = true;
                 $(this).fadeOut();
                 $('.copy').fadeIn();
                 eventIsRunning = false;
            }
        }
    );
});
于 2013-02-08T10:41:54.673 回答