jquery - 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をクリックしたときに幅を変更することです

score 20 · Accepted Answer

これを試して：

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

フィドルの例

score 9 · Accepted Answer

お前！あなたのコードは機能しますが、それが何をするのか理解していません...

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

ライブデモ

score 3 · Accepted Answer

と呼ばれる 2 つの jQuery メソッドがありますtoggle。1 つは可視性を切り替えますが、ここでは関係ありません。もう 1 つは、関数を交互に起動するクリックハンドラーを適用します。これはあなたが使用しているものです。しかし、あなたはそれを間違って使用しています。

実際に行っているのは#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"});
});

作業コード(200px から開始するため、最初のクリックは何もしないように見えます)

score 1 · Accepted Answer

これを試してみてください: 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>

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

score 0 · Accepted Answer

型強制警告

を使用$("#toggle").width() == 800すると、予期しない型強制が発生する可能性があります。

代わりに、次の使用を検討してください。

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

===の値をinput.width()数値プリミティブと比較する型と値の比較演算子に注意0してください。Asinput.width()はプリミティブ型number0の値に評価され、この条件に等しい場合はが返されtrueます。

値比較演算子を使用する慣行は、==予期しないバグにつながる可能性のある JavaScript 型システムを回避します。条件ステートメント内ではそれほど危険ではありませんが、予期しない動作が発生するリスクは依然としてあります。型強制の詳細については、この記事を参照してください。

score -1 · Accepted Answer

$('#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 - jQueryで幅を切り替える

7 に答える 7

型強制警告

Related

Reference