用jQuery切换宽度 [英] Toggle width with jQuery

问题描述

如何使用动画切换div的宽度?

How do I toggle the width of a div with animation?

HTML:

<div id="toggle-button"></div>
<div id="toggle"></div>​

css:

#toggle{
  height:200px;
  width:200px;
  background:red;
}
#toggle-button{
  height:20px;
  width:20px;
  background:blue;
}

jQuery:

$(document).ready( function(){
  $('#toggle-button').click( function() {
    $('#toggle').toggle(function() {
      $('#toggle').animate({width:"200px"});
    }, function() {
      $('#toggle').animate({width:"300px"});
    });
  });
});​

不起作用的示例: http://jsfiddle.net/ZfHZV/1/

我的目标是在单击蓝色div时更改宽度

My goal is to change the width when I click on the blue div

推荐答案

尝试一下:

$(document).ready( function(){
    $('#toggle-button').click( function() {
        var toggleWidth = $("#toggle").width() == 300 ? "200px" : "300px";
        $('#toggle').animate({ width: toggleWidth });
    });
});

小提琴示例

这篇关于用jQuery切换宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！