Question

我有两个div元素，每个元素的宽度为50％。我想将悬停时将一个div div扩大到70％，将另一个div减少到30％。

然后，当鼠标移出时，两者均返回50％。我尝试了所附的代码，但是没有用。

请问如何使它正常工作？

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Flex Hover Slider Demo</title>
    <style>

        #wrapper {
    width:100%;
    overflow:hidden;
    white-space:nowrap;
}
#left, #right {
    display:inline-block;
    width: 50%;
}
#left {
    background:red;
}
#right {
    background:yellow;
}

    </style>
    
    
    <script>
    
        $("#left, #right").each(function() {
        $(this).data("standardWidth", $(this).width());
    });

    $("#left, #right").hover(function() {
        $(this).animate({
            width: "70%"
        }, 300 );
        $(this).parent().children().not(this).animate({
            width: "30%"
        }, 300 );
    }, function() {
        $(this).parent().children().each(function() {
            $(this).animate({
                width: $(this).data("standardWidth")
            }, 300 );
        });
    });
    
    </script>
</head>

<body>
    <div id="wrapper">
        <div id="left" class="content_left">LEFT</div>
        <div id="right" class="content_right">RIGHT</div>
    </div>

    
</body>
</html>

Answer 1

更改了我的答案

您忘记将jQuery库代码包括在开头部分，而jQuery脚本应位于文档的末尾

<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <title>jQuery Flex Hover Slider Demo</title>
    <style>
        #wrapper {
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
        }
        #left,
        #right {
            display: inline-block;
            width: 50%;
        }
        #left {
            background: red;
        }
        #right {
            background: yellow;
        }
    </style>
</head>

<body>
    <div id="wrapper">
        <div id="left" class="content_left">LEFT</div>
        <div id="right" class="content_right">RIGHT</div>
    </div>

    <script>
        $('#left, #right').each(function() {
            $(this).data('standardWidth', $(this).width());
        });

        $('#left, #right').hover(
            function() {
                $(this).animate(
                    {
                        width: '70%'
                    },
                    300
                );
                $(this)
                    .parent()
                    .children()
                    .not(this)
                    .animate(
                        {
                            width: '30%'
                        },
                        300
                    );
            },
            function() {
                $(this)
                    .parent()
                    .children()
                    .each(function() {
                        $(this).animate(
                            {
                                width: $(this).data('standardWidth')
                            },
                            300
                        );
                    });
            }
        );
    </script>
</body>

Answer 2

您需要导入jQuery的第一件事

 <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous">
        </script>

您需要使用此工具来确保文档准备就绪

 $(document).ready(function () {
      your code goes here ............
  });

然后正常工作

Answer 3

您无需为此而使用jQuery。您可以使用CSS轻松完成。试试这个

#left:hover{display:inline-block;
    width: 70%;}

#right:hover{
    display:inline-block;
    width: 30%;
}

使用jQuery扩展两个div元素

3 个答案: