如何使用jQuery切换（）动画（滑动）与内容相邻的内容

我正在设置一个页面，用户可以根据需要隐藏侧栏。我试图用jqeuryui用下面的JS代码如何使用jQuery切换（）动画（滑动）与内容相邻的内容

// 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的动画，但不知道如何实现这与幻灯片？

我用的是如何改变按钮上的文字时，侧边栏是关闭的说“显示侧边栏”挣扎的第二部分 - 天气它是开放的或立即关闭，它只是说“隐藏边栏”

寻找一些帮助

感谢

来源

2012-12-13 Redwall

看到这个更新小提琴：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; 
}

来源

2012-12-13 10:32:20 Anujith

真棒男人，非常感谢... – Redwall

高兴得到帮助... :) – Anujith

（SCRATCH THIS，对不起工作，我的坏贴）我可能应该注意到，你所做的编辑不适合我，怪异... http：//jsfiddle.net/jwg4U/23/但这个工作http://jsfiddle.net/jwg4U/20/我能看到你唯一改变的是'if（i === 0 ）{'由于某种原因，当我在我的开发网站上运行它时，什么也没发生......奇怪 – Redwall

为完整的答案的的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-13 10:39:07 Nupur

如何使用jQuery切换（）动画（滑动）与内容相邻的内容

回答

相关问题