Переключить ширину с помощью jQuery

Как переключить ширину 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

Ответ 1

Попробуйте следующее:

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

Пример скрипта

Ответ 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, а затем на красную пару раз и посмотрите, как это работает.

Обратите внимание, что вам лучше присоединить обратные вызовы для переключения с помощью one вместо click, чтобы избежать множественного обратного вызова кликов:

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

Live DEMO

Ответ 3

Существует два метода jQuery под названием toggle. Один переключает видимость, что здесь не актуально. В другом случае применяется обработчик кликов, который поочередно запускает функции. Это то, что вы используете. Однако вы ошибаетесь.

То, что вы на самом деле делаете, ждет нажатия #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"});
});

Рабочий код (nb, который, начиная с 200px, первый щелчок ничего не делает)

Ответ 4

Попробуйте следующее: Он работает со всеми версиями Jquery || jquery 1.10.1 || к || jquery 2.1.4 ||

Script

 <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>

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

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

<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>

Ответ 5

Использование JQuery 2.1.1 и установка ширины и переход с помощью CSS. Также работает с процентной шириной, изменением цвета и т.д.

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

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

<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>

Ответ 6

Тип Принуждение Предупреждение

Использование $("#toggle").width() == 800 может привести к неожиданному приведению типов.

Вместо этого рассмотрите возможность использования следующего:

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

Ответ 7

Тип Принуждение Предупреждение

Использование $("#toggle").width() == 800 может привести к неожиданному приведению типов.

Вместо этого рассмотрите возможность использования следующего:

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

Обратите внимание на оператор сравнения типа и значения === сравнивающий значение input.width() с числовым примитивом 0. Поскольку input.width() оценивается как значение числа типа примитива, когда оно равно 0 это условие вернет true.

Практика использования оператора сравнения значений == обходит систему типов JavaScript, что потенциально может привести к неожиданным ошибкам. Хотя это и менее опасно в условном выражении, существует риск неожиданного поведения. Пожалуйста, смотрите] эту статью для получения дополнительной информации о приведении типов] (https://medium.freecodecamp.org/js-type-coercion-explained-27ba3d9a2839).

Ответ 8

$('#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 });

});