jquery .slideToggle() 水平替代？

jquery .slideToggle() horizontal alternative?

提问by ThomasCS

slideToggle does exactly what I want, only I want the slide to be horizontal.

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

I now have an horizontalhide/show and animation on click, but I would like to have the toggle options. So that when I click on the active link, it will play the animation reversed and hide itself.

我现在有一个水平隐藏/显示和点击动画，但我想要切换选项。这样当我点击活动链接时，它就会反向播放动画并隐藏自己。

What would be the best way to do this?

什么是最好的方法来做到这一点？

回答by undefined

You can use the animatemethod:

您可以使用以下animate方法：

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

http://jsfiddle.net/7ZBQa/

http://jsfiddle.net/7ZBQa/

回答by powtac

Created a fiddle http://jsfiddle.net/powtac/RqWk2/

创建了一个小提琴http://jsfiddle.net/powtac/RqWk2/

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

回答by Yevgeniy Afanasyev

There is another way, to use jquery ui. See api jquery uibut it may not be always useful as it has its glitches

还有另一种方法，使用jquery ui。请参阅 api jquery ui但它可能并不总是有用，因为它有它的小故障

Here jsfiddleto see the glitch, it does not move all the rest elements smoothly. I put here code, but it should be used with jQuery UI 1.10.3.

在这里jsfiddle看到了故障，它并没有平滑地移动所有其余元素。我把代码放在这里，但它应该与 jQuery UI 1.10.3 一起使用。

js

js

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

css

css

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

html

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>

回答by Alexandre Ribeiro

i tried this, and works great!

我试过了，效果很好！

html code:

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>

The CSS /* flip the pane when hovered */ .flip-container:hover .flipper, .flip-container.hover .flipper { transform: rotateY(180deg); }

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

i use this inside a bootstrap col-sm-* and works great too

我在 bootstrap 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>

the css

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

回答by kimoduor

If you needed it to be continuous, you can set up setTimeinterval as follows

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

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

回答by sjsam

If you wish to toggle between two width's you could do something like below :

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

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

回答by safeer008

I wanted the Height to toggle so I used(I used in my project)

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

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