Question

是的，这听起来像一个简单的问题，而且可能是。但是，当我实施一些解决方案时，我发现，而不是它们正在发挥作用。

基本上我有一个主内容div，在div后面我有一个小侧边栏div，当我点击一个元素时，我想从主div后面动画出来。好像很简单？好吧，我的脑袋不能正确编码..还有，jQuery noob在这里，如果我们要完全诚实：

以下是相关的HTML：

        <div id="clickme" style="z-index: 900; background-color:Black; width: 50px; height: 50px;"></div>

    <div id="superMain">
        <div id="leftFlyout"></div>
        <div class="main"><asp:ContentPlaceHolder ID="MainContent" runat="server"/></div>
        <div id="rightFlyout"></div>
    </div>

这是CSS

#rightFlyout
{
width: 75px;
height: 400px;
background-color: Red;
position: absolute;
top: 0;
left: 875px;

}

#leftFlyout
{
float:left;
width: 75px;
height: 400px;
background-color: Red;
position: absolute;
top: 0;
left: 10px;

}

#superMain
{
position:relative;
}
.main
{
border-left:1px solid black;
border-right:1px solid black;
border-bottom:1px solid black;
padding: 0px;
padding-top: 10px;
margin: 0px auto;
min-height: 420px;
height:auto;
width: 940px;
background-color: White;
z-index: 10;
}

annnnnnd，jQuery（整个标题，以防万一我搞砸了）

<head runat="server">
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
<script>
    $('#clickme').toggle(function () {

        $('#rightFlyout').animate({
            left: '+=200'
        }, 458, 'swing', function () {

            // Animation complete. CALLBACK?

        });

    }, function () {

        $('#leftFlyout').animate({
            left: '-=200'
        }, 458, 'swing', function () {

            // Animation complete. CALLBACK?

        });

    });
</script>
</head>

请帮忙！如果这是我犯的一个荒谬的愚蠢错误，请无情地嘲笑。

Answer 1

您需要使用$(document).ready()处理程序：

$(document).ready(function() {
    //Your code here
});

Answer 2

尝试在left=属性中使用绝对位置（包括'px'）：

...
$('#leftFlyout').animate({
        left: '-200px'
    }, 458, ...

而且，您的代码说：

如果我点击clickMe向右移动rightFlyout 200px 如果我再次点击，请向左移动leftFlyout 200px 如果我点击clickMe移动rightFlyout 200px吧等等。

如果要移动其中一个并将另一个恢复到原始位置，则必须添加代码以在每个函数中恢复它（切换不会恢复被调用函数的更改）。

jQuery函数在单击另一个div时左/右移动div

2 个答案: