使用jQuery切换宽度

Question

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

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时更改宽度

Answer 1

试试这个:

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

示例小提琴

Answer 2

好家伙!你的代码有效,你只是不明白它的作用......

  $('#toggle-button').click( function() { // Execute when the toggle button is clicked.
    $('#toggle').toggle(function() {      // Attach toggle function that fire different
                                          // callback when clicked.
      $('#toggle').animate({width:"200px"});
    }, function() {
      $('#toggle').animate({width:"300px"});
    });
  });

点击蓝色div,然后点击红色div几次,看看它是如何工作的.

请注意,您最好附加切换点击回调,one而不是click避免多次回调点击:

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

现场演示