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

我想要的高度來切換，所以我用（我用我的項目）

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

Answer 4

還有另一種方法，使用jquery ui。見 api jquery ui 但它有它的毛刺

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

Answer 5

我想這和偉大工程！

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容器時翻轉窗格：懸停.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 6

如果你需要它是連續的，你可以設置setTimeinterval如下

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

Answer 7

如果你希望兩個寬度的之間進行切換，你可以做類似如下：

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