使用 jQuery 实现元素的横向滑入滑出（代码）

使用 jQuery 实现元素的横向滑入滑出

2012年04月02日 | IT点滴 | 浏览 12,677 | 暂无评论      

虽然 jQuery 有一组漂亮的幻灯片效果：.slideDown()，.slideUp() 和 .slideToggle()，它们的滑动方向都是垂直的。有时，我们可能需要水平方向的滑动。最简单的方法是通过对元素的 width 属性使用 .animate() 方法来实现。
<div class="dp-highlighter">
<ol class="dp-c">
<li class="alt"><span><span>$(document).ready(</span><span class="keyword">function</span><span>() {   </span></span></li>
<li><span>  $('#slidewidth button').click(</span><span class="keyword">function</span><span>() {   </span></li>
<li class="alt"><span>    $(</span><span class="keyword">this</span><span>).next().animate({width: 'toggle'});   </span></li>
<li><span>  });   </span></li>
<li class="alt"><span>});  </span></li>
</ol>
</div>
<strong>应用举例</strong>：

请从下面的词汇表里选择答案来完成句子。
（点击下划线处可<strong>显示/隐藏</strong>答案）
billed as / paraded / festivities / renovated / spectacle

1. But, apart from concerns over potential increased rent in social housing, she was against the current proposals to move long-term residents into different <span id="reference" style="position: relative; display: inline;"><span id="click2cn">________________</span><span id="cn"><strong>renovated</strong></span></span> homes on site.
&nbsp;
<div style="line-height: 18px; color: #8c8c8c; font-size: 12px; border-top: #eee 1px solid; padding-top: 5px;">参考:
<a title="Slide Elements in Different Directions" href="http://www.learningjquery.com/2009/02/slide-elements-in-different-directions" rel="bookmark" target="_blank">Slide Elements in Different Directions</a>
<a title="Sliding divs horizontally with JQuery" href="http://stackoverflow.com/questions/9864305/sliding-divs-horizontally-with-jquery" target="_blank">Sliding divs horizontally with JQuery</a></div>

<script type="text/javascript">
jQuery(function($){                                //copied from search.php, and modified, HL 20120108
$('span#click2cn').css({cursor:"pointer"});
$('#reference span#cn').hide();
$('#reference span#click2cn').click(function(){    //点击下划线上面的空白处，显示/隐藏答案, HL 20120331
   //var $word_left = ((16*6)-($(this).next().text().length)*7)/2;
   var $word_left = ((16*6)-$(this).next().width())/2; //put word in the center of the underline, 16 _ used, HL 20120331
   //$(this).next().slideToggle('fast');           //sliding down, this will broken the line, HL 20120330
   $(this).next().animate({width: 'toggle'});      //see: http://goo.gl/KSHw for detail HL 20120331
   $(this).next().css({position:"absolute","left":$word_left,"bottom":"0px","white-space":"nowrap",cursor:"pointer"});
   return false;});
});
$('#reference span#cn').click(function(){         //点击下划线上面已经显示出的答案，让答案再次隐藏，HL 20120331
   $(this).animate({width: 'toggle'});
   //return false;//不能要这句，HL 20120331 });
});
</script>