jquery - jquery .slideToggle（）水平方向の代替？

Question

slideToggleは私が望むことを正確に実行しますが、スライドを水平にしたいだけです。

クリックすると水平方向の非表示/表示とアニメーションが表示されますが、トグルオプションが必要です。そのため、アクティブなリンクをクリックすると、アニメーションが反転して再生され、非表示になります。

これを行うための最良の方法は何でしょうか？

Answer 1

animate次の方法を使用できます。

$('#element').animate({width: 'toggle'});

http://jsfiddle.net/7ZBQa/

Answer 2

フィドルを作成しましたhttp://jsfiddle.net/powtac/RqWk2/

$("div").animate({width: 'toggle'});

Answer 3

jqueryuiを使用する別の方法があります。api jquery uiを参照してください 。ただし、グリッチがあるため、常に役立つとは限りません。

ここでjsfiddleはグリッチを確認しますが、残りのすべての要素をスムーズに移動するわけではありません。ここにコードを入れましたが、jQueryUI1.10.3で使用する必要があります。

js

$( document ).click(function() {
  $( "#toggle" ).toggle('slide');
});

css

.t {
    width: 100px;
    height: 100px;
    background: #ccc;
    display: inline-block;
    float: left;
  }

html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<p>Click anywhere to toggle the box.</p>
<div id="toggle" class='t'>1</div>
<div id="" class='t'>2</div>
<div class='t'>3</div>

Answer 4

私はこれを試しました、そしてうまくいきます！

htmlコード：

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
        <div class="front">
            <!-- front content -->
        </div>
        <div class="back">
            <!-- back content -->
        </div>
    </div>
</div>

CSS/*ホバーしたときにペインを反転します*/.flip-container：hover .flipper、.flip-container.hover .flipper {transform：rotateY（180deg）; }

.flip-container, .front, .back {
    width: 320px;
    height: 480px;
}

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;

    position: absolute;
    top: 0;
    left: 0;
}

/* front pane, placed above back */
.front {
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
    transform: rotateY(180deg);
}

私はこれをブートストラップcol-sm-*内で使用し、うまく機能します

 <div class="col-sm-4 flip-container" ontouchstart="this.classList.toggle('hover');">
                    <div class="content-box flipper">
                        <div class="content-box-front">
                            <span class="glyphicon glyphicon-envelope content-box-icon"></span>
                            <h4>Share your emotions</h4>
                        </div>
                        <div class="content-box-back">
                            <p>Share emotions with friends, family and teammates.</p>
                            <button>Read more</button>
                        </div>
                    </div>
                </div>

css

.content-box
{
    position: relative;
    text-align: center;
    height: 105px;
    width: 100%;
}
.content-box-icon
{
    font-size: 30px;
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 50%;
    text-align: center;
    display: block;
    margin: 5px auto 15px auto;
    color: #fff;
    float: none; 
    background:#25acfd                     
}
.content-box-front
{
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 105px;
}
.content-box-back
{
    transform: rotateY(180deg);
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 105px;
}
/* entire container, keeps perspective */
    /* flip the pane when hovered */
    .flip-container:hover .flipper, .flip-container.hover .flipper {
        transform: rotateY(180deg);
    }

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}

Answer 5

継続的にする必要がある場合は、次のようにsetTimeintervalを設定できます。

<?php
setInterval(function (){
$('div').animate({width: 'toggle'});
},200);
?>

Answer 6

2つの幅を切り替えたい場合は、次のようにすることができます。

$('#A').click(function(){
if($(this).width() > 20){
$(this).animate({width: '20px'})
}
else{
$(this).animate({width: '50%'})
}
});

#A{
  float:left;
  width:50%;
  height:300px;
  background:red;
}
#B{
  min-height:300px;
  background:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="A">
</div>
<div id="B">
<span>Some stuff</span>
</div>

Answer 7

高さを切り替えたいので、使用しました（プロジェクトで使用しました）

function show_hide(target){
 var x = document.querySelectorAll("." +target);
 var y = $( x ).next()
 $(y).animate({height: 'toggle'});
}