2

我正在设置一个页面，用户可以根据需要隐藏侧栏。我正在尝试使用 jqeuryui 通过以下 js 代码执行此操作

// TOGGLE JS
$(function () {      
    function runEffect() {           
        var options = {};            
        $("#effect").toggle('slide', options, 500);
    };
    $("#button").click(function () {
        runEffect();
        return false;
    });
});

我在这里的 JSFiddle 中有这个工作http://jsfiddle.net/jwg4U/

但是，当您查看 JSFiddle 时，您会注意到我的主要内容区域（称为 DIV）#content没有动画，它只是在我切换侧边栏时跳转到位。

我希望内容 div 也能无缝滑入到位，并按照切换按钮连接到它。

我看过 jquery animate，但不知道如何用幻灯片实现这个？

我正在努力的第二部分是如何在侧边栏关闭时更改按钮文本以说“显示侧边栏”-天气它现在打开或关闭它只是说“隐藏侧边栏”

寻求帮助

谢谢

4

2 回答 2

1

看到这个更新的小提琴：http: //jsfiddle.net/jwg4U/23/

HTML：

<div id="container" style="width:800px">

<div id="header">
     <h1>HEADER</h1>
</div>

<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
    <div id="menu" style="background-color:#FFD700;height:300px;width:100px;float:left;">
        <h3>SIDEBAR</h3>
    </div>
</div>


<div id="content" style="background-color:#EEEEEE;height:300px;">Main Content goes     here</div>
</div>
<a href="#" id="button" class="ui-state-default ui-corner-all">Hide Sidebar</a>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
FOOTER</div>

</div>

​</p>

JS：

// TOGGLE JS
$(function() {
var i = 0;

function runEffect() {
    var options = {};
    if (i === 0) {
        i = 1;
        $(".toggler").animate({
            left: -100
        }, {
            duration: 500
        });
    }
    else {
        i = 0;
        $(".toggler").animate({
            left: 0
        }, {
            duration: 500
        });
    }
}
$("#button").click(function() {
    if (i === 0) {
        $(this).html("Show Sidebar");
    }
    else {
        $(this).html("Hide Sidebar");
    }
    runEffect();
    return false;
});
});

// TABS JS
$(function() {
$("#tabs").tabs();
});​

CSS：

 .toggler {
    float: left;
    position: relative;
}
#button {
    padding: .5em 1em;
    text-decoration: none;
}
#effect {
    position: relative;
    float: left;
}
#content{
    position: relative;
    float: left;
    width: 500px;
}
#button{
    float: left;
    clear: both;
}
#header{
    background-color: #000;
    color: #FFF;
}​
于 2012-12-13T10:32:20.437 回答
0

完整答案的 jsfiddle：http: //jsfiddle.net/jwg4U/22/

  $('#effect').animate({
   width: 'toggle',
   height: 'toggle'
    }, {
   duration: 500,
   specialEasing: {
     width: 'linear',
     height: 'linear'
   },
   complete: function() {
      $("#content").animate(
           { left: '+=100px' },
           60, 
           'easeInQuad', 
           function () 
           { 
               if(isOpen)
               {
                  isOpen=false;  
                  $("#button").html('Show Sidebar');                     
                }
                else
                {
                  isOpen=true;
                  $("#button").html('Hide Sidebar');     
                }
             });
        }
   });
于 2012-12-13T10:39:07.197 回答