2

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

<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 时 - 它返回到以前的状态。问题是：当我在脚本结束之前（在开始动画的 500 毫秒之前）将鼠标移入图片区域时，两张图片都会消失片刻。我已经添加了带有变量 end 和 end2 的条件 - 我不知道为什么它们不起作用.. 我整夜都在寻找错误，但我没有找到任何东西，所以请帮助我 :)

4

2 回答 2

0

脚本：

 $(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);
            }   
        });
    });
于 2013-08-06T05:57:36.003 回答
0

为了回答你的问题，两张图片同时变成透明的，所以你会看到背景。尝试仅对顶部图像应用透明度，然后您不必使用 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});         
        }
    );
});
于 2013-08-06T06:22:47.333 回答