如何使用 jquery toggle() 为与内容相邻的内容设置动画（幻灯片）答案

【问题标题】：How to Animate (slide) content adjacent to content with jquery toggle()如何使用 jquery toggle() 为与内容相邻的内容设置动画（幻灯片）
【发布时间】：2012-12-13 09:15:42
【问题描述】：

我正在设置一个页面，用户可以根据需要隐藏侧边栏。我正在尝试使用 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 animate，但不知道如何用幻灯片实现它？

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

寻求帮助

谢谢

【问题讨论】：

标签： javascript jquery jquery-ui jquery-plugins

【解决方案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;
}

【讨论】：

（刮擦，抱歉确实有效，我的粘贴错误）我可能应该注意到，您在上面所做的编辑对我不起作用，很奇怪...jsfiddle.net/jwg4U/23 但这个确实有效@987654323 @ 我能看到你改变的唯一一行是 if (i === 0) { 出于某种原因，当我在我的开发网站上运行它时没有任何反应......奇怪

【解决方案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');     
                }
             });
        }
   });

【讨论】：