Question

我正在尝试使覆盖面板从页面侧面滑入和滑出。它适用于Jquery 1.3，但之后没有任何内容。我让它以1.6.4滑出，但它不会滑回来。

我很难过，我查看了所有Jquery更改日志，但无法理解。希望有人可以帮助我，感谢。

这是我的代码......

HTML

<div id="sliderWrap">
    <div id="openCloseIdentifier"></div>
    <div id="slider">
      <div id="sliderContent">
                    </div>
      <div id="openCloseWrap">
            <a href="#" class="topMenuAction" id="topMenuImage">
                <img src="open.png" alt="open" />
            </a>
        </div>
    </div>
</div>

CSS

body {
margin: 0;
font-size:16px;
color: #000000;
font-family:Arial, Helvetica, sans-serif;
height: 100%;
}

#sliderWrap {
position:absolute;
top:0px;
left:0px;
height:100%;
width: auto;
}

#slider {
position: absolute;
background-color:black;
width: 600px;
height: 100%;
margin-left: -550px;
top:0;
left:0;
}

#slider img {
border: 0;
}

#sliderContent {
margin: 50px 0 0 50px;
position: absolute;
text-align:center;
background-color:#FFFFCC;
color:#333333;
font-weight:bold;
padding: 10px;
}

#header {
margin: 0 auto;
width: 600px;
background-color: #F0F0F0;
height: 200px;
padding: 10px;
}

#openCloseWrap {
position:absolute;
margin-top: auto;
margin-right: 0;
margin-bottom: auto;
margin-left: 600px;
}

的Javascript

    $(document).ready(function() {
    $(".topMenuAction").click( function() {
        if ($("#openCloseIdentifier").is(":hidden")) {
            $("#slider").animate({ 
                marginLeft: "-550px"
                }, 500 );
            $("#topMenuImage").html('<img src="images/open.png" alt="open" />');
            $("#openCloseIdentifier").show();
        } else {
            $("#slider").animate({ 
                marginLeft: "1px"
                }, 500 );
            $("#topMenuImage").html('<img src="images/close.png" alt="close" />');
            $("#openCloseIdentifier").hide();
        }

    });  
});

Answer 1

试试这个方法：

$(document).ready(function() {
    $(".topMenuAction").click( function() {
        if ($("#openCloseIdentifier").hasClass("closed")) {
            $("#slider").animate({ 
                marginLeft: "-550px"
                }, 500 );
            $("#topMenuImage").html('<img src="images/open.png" alt="open" />');
            $("#openCloseIdentifier").removeClass("closed");
        } else {
            $("#slider").animate({ 
                marginLeft: "1px"
                }, 500 );
            $("#topMenuImage").html('<img src="images/close.png" alt="close" />');
            $("#openCloseIdentifier").addClass("closed");
        }

    });  
});

我更喜欢使用hasClass()，removeClass()和addClass()而不是is(":hidden")。

这适用于最新版本的jquery - check it out。

忘记提及

你还需要先给你的div一个封闭的类：

<div id="openCloseIdentifier" class="closed"></div>

Javascript动画无法在新版本的Jquery中使用

1 个答案: