jquery.slideToggle（）水平选项？

slideToggle做的正是我想要的，只是我希望幻灯片是水平的

我现在有一个水平隐藏/显示和动画点击，但我想有切换选项。因此，当我单击活动链接时，它将播放动画并隐藏自身

---

执行此操作的最佳方法是什么？

您可以使用

动画制作方法：

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

创造了一把小提琴

我想切换高度，所以我使用了（我在项目中使用）

还有另一种方法，使用jQueryUI。看见
但它可能并不总是有用的，因为它有它的小故障

在这里看到的小故障，它没有移动所有的休息元素顺利。
我把代码放在这里，但它应该与jQueryUI1.10.3一起使用

js

css

html


单击任意位置以切换框

1.
2.
3.
我试过这个，效果很好

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>

我在引导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>

如果您需要它是连续的，您可以如下设置setTimeinterval

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

如果您希望在两种宽度之间切换，可以执行以下操作：


$（'A'）。单击（函数（）{
如果（$（this）.width（）>20）{
$（this.animate（{width:'20px'}）
}
否则{
$（this.animate（{width:'50%}）
}
});
#A{
浮动：左；
宽度：50%；
高度：300px；
背景：红色；
}
#B{
最小高度：300px；
背景：绿色；
}

一些东西
啊，是的，但我希望它是另一种方式，当我单击某个东西时，它会弹出。而不是
width:“toggle”
你冷使用
width:“200px”
但它不会再切换了？我尝试使用“200px”，但它不显示div，即使我将样式宽度设置为“0px”，它现在也会始终显示div，并且每次我单击带有onclick事件的按钮时都会闪烁。如果我对您可能理解的假设不清楚，我会从显示div开始：无，并且当我尝试将其宽度设置为200px时不会发生任何事情。然后，如果我显示div并尝试将宽度设置为0px，它只会闪烁到0，然后再次向右返回到全尺寸。耶，这就是我想要的，谢谢你的回答。我仍然不能真正理解{width:'toggle'}语句。您已经在css中设置了宽度，但“显示”为“无”。所以jquery然后显示元素并设置给定宽度的动画？@ThomasCS这些属性不是必需的，我只是在演示中添加了它们，是的，jquery设置宽度的动画，如果元素被隐藏，jquery设置宽度的动画并显示，反之亦然。但我仍然必须为每个按钮指定不同的类或id，因为一个按钮会切换另一个按钮？@ThomasCS嗯，这与代码背后的选择器和逻辑有关，如果你想为多个元素设置动画，你可以向它们添加类属性。ai，刚刚发现它不能100%工作。链接都加载到同一个iframe中，因此我正在设置iframe的动画。他们在iframe中互相动画化。。。@BlackSheep answer的一个小更新。为什么不使用.slideToggle（），原始问题要求垂直替换的函数？
.t {
    width: 100px;
    height: 100px;
    background: #ccc;
    display: inline-block;
    float: left;
  }

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

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

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

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

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

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