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

有三个div,一个div显示，另外俩个隐藏，当鼠标放上后，两个隐藏的div慢慢向两边展开，怎么用jquery实现，要具体

举报该文章

相关建议 2015-02-01

<!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/n2px9dipxdn2dnxv2s.html

其他看法

第1个回答 2015-01-28

分都没有！
给你个思路其实就是把div从一个位置移动到另外一个位置，一个向左，一个向右

相似回答

大家正在搜