jQuery的.slideToggle（）水平替代？

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

我现在有一个水平隐藏/显示和点击animation，但我想有切换选项。 所以，当我点击活动链接时，它将播放倒转的animation并隐藏自己。

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

Answer 1

您可以使用animate方法：

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

http://jsfiddle.net/7ZBQa/

Answer 2

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

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

Answer 3

还有另一种方法，使用jQuery UI。 请参阅api jQuery UI，但它可能并不总是有用的，因为它有毛病

在这里，看到这个小故障，它不会顺利地移动所有其他元素。 我把代码放在这里，但是它应该和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 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> 

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

如果你想在两个宽度之间切换，你可以做如下的事情：

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