Question

我的页面有完整的代码，您可以自己查看：

<html>
<head>
</head>
<body>
    <link rel="Stylesheet" type="text/css" href="style.css" />
    <style type = "text/css">
        #img1 {
            opacity: 1;
            display: block;
            position: fixed;
            top: 0;
            left: 0;
        }
        #img2 {
            opacity: 1;
            display: block;
            position: fixed;
            top: 0;
            left: 0;
        }
        #cont {
            position: fixed;
            top: 0;
            left: 0;
            width: 880px;
            height: 360px;
            border: 5px;
            border-style: solid;
            background-color: red;
            z-index: 100;
            opacity: 0.9;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type = "text/javascript">
        $(document).ready(function()
        {
            var check = 0;
            var ended = 1;
            var ended2 = 1;
            $("#img2").mouseenter(function()
            {
                if (check == 0 && ended == 1)
                {
                    ended = 0;
                    $("#img2").fadeOut(500, function()
                    {
                        $("#img2").css({"z-index":"2"});
                        $("#img1").css({"z-index":"3"});
                        ended = 1;
                    }).fadeIn(1);
                    check = 1;
                }
            });
            $("#cont").mouseleave(function()
            {
                check = 0;
                if (ended2 == 1)
                {
                    ended2 = 0;
                    $("#img1").fadeOut(500, function()
                    {
                        $("#img2").css({"z-index":"4"});
                        $("#img1").css({"z-index":"1"});
                        ended2 = 1;
                    }).fadeIn(1);
                }   
            });
        });
    </script>
    <div id = "cont">
    <img src = "http://s16.postimg.org/egzrkpa1h/img1.jpg" id = "img1">
    <img src = "http://s23.postimg.org/kzurc5h63/img2.jpg" id = "img2">
    </div>
</body>
</html>

代码很简单：当鼠标聚焦在图片上时，它会“改变颜色”，当离开红色div时 - 它会返回到之前的状态。问题是：当我在脚本结束前（在开始动画500ms之前）将鼠标移动到图片区域时，两张图片都消失了一会儿。我已经添加了变量结束和结束2的条件 - 我不知道为什么它们不起作用..我整晚都在寻找错误而我找不到任何东西，所以请帮帮我:) / p>

Answer 1

<强> SCRIPT：

 $(document).ready(function()
    {
        var check = 0;
        var ended = 1;
        var ended2 = 1;
        $("#img2").mouseenter(function()
        {
            if (check == 0 && ended == 1)
            {
                ended = 0;
                $("#img2").stop(true,true).fadeOut(500, function()
                {
                    $("#img2").css({"z-index":"2"});
                    $("#img1").css({"z-index":"3"});
                    ended = 1;
                }).stop(true,true).fadeIn(1);
                check = 1;
            }
        });
        $("#cont").mouseleave(function()
        {
            check = 0;
            if (ended2 == 1)
            {
                ended2 = 0;
                $("#img1").stop(true,true).fadeOut(500, function()
                {
                    $("#img2").css({"z-index":"4"});
                    $("#img1").css({"z-index":"1"});
                    ended2 = 1;
                }).stop(true,true).fadeIn(1);
            }   
        });
    });

Answer 2

要回答您的问题，两张图片会同时变为透明，因此您将看到背景。尝试仅将透明度应用于顶部图像，然后您不必使用z-index或其他任何内容更改订单，但是......

你不需要javascript来做到这一点。通过css添加悬停状态，您将得到相同的结果。尝试删除所有的JavaScript，只需将其添加到您的CSS：

#img2:hover {opacity:0;} 
#img2 {transition: opacity 0.5s;}

如果你真的想使用jQuery，请尝试悬停，其中第一个参数是“鼠标悬停”，第二个“鼠标离开”：

$(document).ready(function(){
    var topImage = $("#img2");
    topImage.hover(
        function(){
            topImage.stop().animate({opacity:0});
        },
        function(){
            topImage.stop().animate({opacity:1});         
        }
    );
});

当我更快地更改其属性时，图像消失

2 个答案: