目标
当用户单击该按钮时,相关div将:
>向下滑动
>停止
>淡入内容
当用户再次单击该按钮时,div将:
>淡出
>停止
>向上滑动
当前位置
这是一个fadeIn和fadeOut在正确的时间发生的例子,但fadeIn和fadeOut之前和之后都没有滑动效果
http://jsfiddle.net/tkRGU/1/
此选项还有slideToggle功能,但分别在幻灯片之前和之后没有出现fadeIn和fadeOut.
http://jsfiddle.net/MY8DD/7/
解决方法
这将有效:
HTML:
<a href="#" onclick="toggleSlider();">toggle</a> <div id="panelThatSlides" style="display:none;background:#eee;padding:10px;"> <div id="contentThatFades" style="opacity:0;filter:alpha(opacity=0);"> Lorem ipsum dolor sit amet,consectetur adipiscing elit. Donec ut tortor erat,et consectetur nisl. Nunc non placerat odio. Cras feugiat pulvinar diam sed sollicitudin. Quisque ut elit lacus,et gravida nunc. Maecenas ac enim ligula. Aenean felis nunc,vulputate pellentesque vehicula nec,tristique a tortor. Curabitur et semper dui. Sed id nisl turpis. Sed vel nunc et nisi laoreet feugiat. Sed lobortis enim sed arcu tempor vehicula. Vivamus dui ligula,ultricies id egestas ut,rhoncus et est. Pellentesque dignissim diam vel nibh tempus condimentum. Etiam sodales fermentum pharetra. Etiam faucibus tempus malesuada. Mauris nulla lectus,laoreet sit amet cursus vel,ultricies at enim. Sed facilisis rutrum eros,nec malesuada eros iaculis ac. <br /><br /> In consectetur faucibus fermentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras nunc magna,vestibulum eget pulvinar hendrerit,tincidunt id arcu. Nullam dolor ligula,suscipit placerat condimentum ac,feugiat ut mauris. Suspendisse semper dolor condimentum dui ornare rhoncus. In bibendum massa vel erat tristique congue. Donec vel mi quam,ac iaculis odio. Nulla interdum orci quis ligula aliquam viverra. Nam eget egestas mauris. Sed in massa quis erat venenatis aliquam. </div> </div>
使用Javascript:
function toggleSlider() { if ($("#panelThatSlides").is(":visible")) { $("#contentThatFades").animate( { opacity: "0" },600,function(){ $("#panelThatSlides").slideUp(); } ); } else { $("#panelThatSlides").slideDown(600,function(){ $("#contentThatFades").animate( { opacity: "1" },600 ); }); } }
对于IE,只需确保内容背后的背景颜色为cleartype.