Question

我正在设置一个页面，用户可以根据需要隐藏侧栏。我正在尝试使用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时，您会注意到我的主要内容区域是一个名为#content的DIV没有动画，它只是在我切换侧边栏时跳转到位。

我希望内容div也可以无缝地滑入到位，并按照切换方式连接到它。

我看过jquery动画，但不确定如何用幻灯片实现这个？

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

寻求帮助

由于

Answer 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>

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;
}

Answer 2

完整答案的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');     
                }
             });
        }
   });

如何使用jquery toggle（）动画（幻灯片）内容旁边的内容

2 个答案: