logo标签列表

jQuery .slideToggle()的水平替代方法？

jqueryhtmltoggleslidetoggle
60

slideToggle可以完美实现我的需求，只是我希望滑动是水平方向的。

现在我已经有了水平隐藏/显示和点击动画，但我想要切换选项。所以当我点击活动链接时，它会反向播放动画并隐藏自身。

最好的方法是什么？

http://jsfiddle.net/AFWNA/826/ 对@BlackSheep答案的一点更新。 - Idrees
7个回答
115
是的，这就是我想要的，感谢你的回答。我仍然不太理解 { width: 'toggle' } 这个语句。你在 CSS 中设置了宽度，但将其显示为无。因此，jQuery 然后显示元素并动画化给定的宽度？ - ThomasCS
2
@ThomasCS 这些属性并非必需，我只是为了演示而添加的。是的，如果元素被隐藏了，jQuery会动画地调整宽度并显示出来，反之亦然。 - Ram
@ThomasCS 嗯，这与您代码背后的选择器和逻辑有关，如果您想要动画多个元素，可以为它们添加类属性。 - Ram
AI，刚刚发现它不能百分之百地工作。所有链接都加载到同一个iframe中，所以我正在对iframe进行动画处理。然后它们会相互影响。 - ThomasCS
@undefined，这里的左侧部分是静态的，而切换是从右侧发生的，能不能将它设置成右侧保持静态并从左侧切换呢？ - cc4re
显示剩余3条评论
4
啊，好的，但我希望它相反，即在我单击某个东西时弹出。 - ThomasCS
你可以使用 width: '200px' 替代 width: 'toggle'。 - powtac
但是那样它就不能切换了？ - ThomasCS
我尝试使用 '200像素'，但它不能显示div，即使我将样式宽度设置为 '0像素'，它现在会始终显示div，并且每次我点击具有onclick事件的按钮时都会闪烁。 - Myzifer
如果我对你可能理解的假设不够清晰，我先从将div设置为display:none开始，当我尝试将其宽度设置为200px时，什么也不会发生。然后，如果我使div显示并尝试将其宽度设置为0px，它只会闪烁到0，然后立即恢复到完整大小。 - Myzifer
我理解你不再关心这件事了。 - Myzifer
1

还有一种方法，可以使用jQuery UI。请参见jQuery UI API，但它可能并不总是有用，因为它有其缺陷。

这里jsfiddle可以看到故障，它不能平稳地移动所有其他元素。 我在这里放置了代码，但应该与jQuery UI 1.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>
0

我尝试了这个，效果很棒！

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(180度); }

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

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

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;
}
0
如果您希望在两个宽度之间进行切换，可以尝试以下操作： 

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

0

如果你希望它是连续的，可以按以下方式设置setTimeinterval

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

我希望能够切换高度，所以我使用了（在我的项目中使用）

function show_hide(target){
 var x = document.querySelectorAll("." +target);
 var y = $( x ).next()
 $(y).animate({height: 'toggle'});
}
2
为什么不使用.slideToggle()函数，这个函数是原问题所要求的垂直替代品呢？ - BJury
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接