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

Example fiddle

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

Live DEMO

Answer 3

有两个名为toggle的jQuery方法。一个切换可见性，这与此无关。另一个应用单击处理程序，它交替激活函数。这就是你正在使用的。但是，你错了。

您实际在做的是等待点击#toggle-button，然后将点击处理程序绑定到#toggle。因此，在第一次单击#toggle后单击#toggle-button时，就会出现动画。（#toggle-button多次点击后，情况会变得更加复杂。

您希望直接在toggle上使用#toggle-button：

$('#toggle-button').toggle(function() { //fired the first time
  $('#toggle').animate({width:"200px"});
}, function() { // fired the second time 
  $('#toggle').animate({width:"300px"});
});

Working code（自从你从200px开始，第一次点击似乎什么都不做）

Answer 4

试试这个：它适用于所有版本的Jquery || jquery 1.10.1 ||到|| jquery 2.1.4 ||

脚本

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script>
            $(document).ready( function(){
            $('#toggle-button').click( function() {
            var toggleWidth = $("#toggle").width() == 800 ? "0px" : "800px";
            $('#toggle').animate({ width: toggleWidth });
            });
            });
    </script>

＆＃13;

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

＆＃13;

#toggle{
    height:200px;
    width:0px;
    background:red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Toggle Width with jQuery</h1>
<input id="toggle-button" type="button" value="Click me!"/>
<div id="toggle"></div>

＆＃13;

Answer 5

使用JQuery 2.1.1并使用CSS设置宽度和过渡。也适用于百分比宽度，颜色变化等。

＆＃13;

$('#button-enlarge').on('click', function () {
  $('.box').toggleClass('expanded');
});

＆＃13;

.box.expanded {
  background-color: #e99;
  transition: all .3s;
  width: 100%;
}
.box {
  width: 40%;
  transition: all .3s;
  background-color: #f00;
  color: #fff;
  height: 140px;
}
#button-enlarge { 
 padding: 10px 15px;
 border: 1px solid #999;
 display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button-enlarge">Click here</div>
<div class="box">box</div>

＆＃13;

Answer 6

类型强制警告

使用$("#toggle").width() == 800可能会导致意外的类型强制。

请考虑使用以下内容：

var foo = $("#toggle").width();
var bar = foo === 0 ? "100%" : "0";

注意：类型和值比较运算符===将input.width()的值与数字基元0进行比较。当input.width()求值为原始类型 number 的值时，当它等于0时，此条件将返回true。

使用值比较运算符==的做法避开了JavaScript类型系统，这有可能导致意外错误。尽管在条件语句中危险性较小，但仍存在意外行为的风险。请参阅this article for more information on type coercion。

Answer 7

$('#toggle-button').one('click', function() { $('#toggle').animate({ width: 'toggle'}, 1000); }); 此切换0到您定义的宽度

我试过这个并且工作

$("#searchIcon").click(function(){
var toggleWidth = "0px";
if($("#searchbox").width() == 118)
{
    toggleWidth="0px";
}
else
{
    toggleWidth="120px";
}
$('#searchbox').animate({ width: toggleWidth });

}）;

使用jQuery切换宽度

7 个答案:

类型强制警告