如何用Jquery实现DIV由中间向两边展开的效果

如何用Jquery实现DIV由中间向两边展开的效果，有三个div，当鼠标放在中间的div上，两边的div从隐藏慢慢向两边展开，怎么写

举报该文章

相关建议 2015-02-21

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>menu</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
outline: 0;
vertical-align: baseline;
}

body {
overflow: hidden;
}

div {
height: 500px;
text-align: center;
line-height: 500px;
margin: auto;
cursor: pointer;
border: 1px solid black;
top: 0px;
font-size: 100px;
}

div.center {
width: 300px;
background-color: blue;
}

div.left,div.right {
position: absolute;
display: none;
}

div.left {
float: left;
background-color: orange;
}

div.right {
float: left;
background-color: yellow;
}
</style>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$ (function ()
    {
var doms = init ();
var center = doms[1], left = doms[0], right = doms[2];
var width = center.width();
    center.hover (function ()
    {
    left.show ().stop ().animate (
    {
    width : width + "px"
    }, "slow");
    right.show ().stop ().animate (
    {
    width : width + "px"
    }, "slow");
    }, function ()
    {
    left.stop ().animate (
    {
    width : "0px"
    }, "slow", function ()
    {
    left.hide ();
    });
    right.stop ().animate (
    {
    width : "0px"
    }, "slow", function ()
    {
    right.hide ();
    });
    });
    });

$(window).resize (function ()
{
init ();
});

var init = function ()
{
var sw = screen.availWidth, sh = screen.availHeight;
    var left = $ ("div.left").height(sh + "px"),
    center = $ ("div.center").height(sh + "px"),
    right = $ ("div.right").height(sh + "px");
    center.width (sw / 3 + "px");
    var w = center.prop ("offsetLeft");
    var width = sw / 3;
    left.css ("right", width + w + "px");
    right.css ("left", width + w + "px");
    return [left, center, right];
}
</script>
</head>
<body>
<div class="left">福</div>
<div class="center">禄</div>
<div class="right">寿</div>
</body>
</html>

温馨提示：内容为网友见解，仅供参考

当前网址：https://66.aolonic.com/aa/up2usp9iss9pn2vp2s.html

其他看法

第1个回答 2019-03-28

代码长,性能也不好。。。。

纯CSS可以达成的效果，不用JS做的~

不知道你要的是不是这个效果，你看一下吧，

正好我自己有需要，随便写了一个~

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>两边展开</title>
  <style>
    .center {
      position: relative;
      width: 500px;
      height: 500px;
      margin: 200px auto;
      background: #f00;
    }
    .left,.right {
      position: absolute;
      top: 0;
      width: 500px;
      height: 500px;
      transform: scaleX(0);
      transition: transform 300ms;
    }
    .left {
      background: #0f0;
      right: -500px;
      transform-origin: left center;
    }
    .right {
      background: #0ff;
      left: -500px;
      transform-origin: right center;
    }
    .center:hover .left,
    .center:hover .right {
      transform: scaleX(1);
    }
  </style>
</head>
<body>
  <div class='center'>
    <div class='left'></div>
    <div class='right'></div>
  </div>
</body>
</html>

本回答被网友采纳

第2个回答 2015-09-13

没有分吗？

第3个回答 2015-01-28

不清楚你的问题，什么叫两边的DIV从隐藏慢慢向两边展开啊？你的DIV之前是隐藏的？能画个图出来吗？追问