Question

我有以下代码在悬停时翻转图像淡入淡出。我还有一个带有一些文本的div，我希望隐藏然后在图像以相同的速度变化时淡入。我知道如何分别做两个，只是不知道如何将其作为一个完整的功能。任何帮助赞赏。我想用jquery显示hide，以便在禁用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");
});

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

Answer 2

首先，您在图片上设置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;
            }
        }
    );
});

如何通过动画翻转在图像上使用jquery悬停时淡入div

2 个答案: