slidetoggle,slidetoggle方法
jQuery 怎么控制一个动画方向?
$("XX").animate({left:"",right:"",top:"",bottom:""},speed,fucntion(){});
第一个参数通过设置上下左右的值可以设置动画元素的运动方向,第二个参数可以设置运动的时间,第三个参数设置动画执行结束之后的操作。
第二、三个参数可以缺省。
第二个参数的值可以是fast、slow或者具体的数值(单位毫秒),缺省值的速度是400毫秒。
第三个参数缺省表示不动画结束后不执行任何操作。
jquery中的滑动函数是
jQuery 滑动函数 - slideDown, slideUp, slideToggle
jQuery 拥有以下滑动函数:
$(selector).slideDown(speed,callback)$(selector).slideUp(speed,callback)$(selector).slideToggle(speed,callback)
speed参数可以设置这些值:"slow", "fast", "normal" 或毫秒。
callback参数是在该函数完成之后被执行的函数名称。
实例$(".flip").click(function(){$(".panel").slideDown();});
jquery怎么实现从右到左滑出来的效果?
引入jquery.js,复制以下代码,即可运行
1,style type="text/css"
2,.slide {
3,position: relative;
4,height: 200;
5,lightyellow;
6,}
7 ,
8,.slide .inner {
9,position: absolute;
10,left: 0;
11,bottom: 0;
12,height: 100;
13,lightblue; ,
14,width: 100%
15,}
16,/style
1、slidetoggle() 交替slidedown(),slideup()
Html代码
div id="slidebottom" class="slide"?
button
slide it
/button
div class="inner"
Slide from bottom
/div
/div
Js代码
$('#slidebottom button').click(function() {
$(this).next().slideToggle();
});
2、左侧横向交替滑动 Animate Left
Html代码
div id="slidewidth" class="slide"
button
slide it
/button
div class="inner"
Slide from bottom
/div
/div
Js代码
$("#slidewidth button").click(function(){
$(this).next().animate({width: 'toggle'});
});
3、左侧横向交替滑动 Animate Left Margin (非隐藏)
Html代码
div id="slideleft" class="slide" style="width: 50%;float: right"
button
slide it
/button
div class="inner"
Slide from bottom
/div
/div
Js代码
$("#slideleft button").click(function(){
var $lefty = $(this).next();
$lefty.animate({
left:parseInt($lefty.css('left'),10)==0 ? -$lefty.outerWidth() : 0
});
});
4、右侧横向滑动Slide to right
Html代码
div id="slidemarginleft" class="slide" style="width: 60%;float: left"
button
slide it
/button
div class="inner"
Slide from bottom
/div
/div
Js代码
$("#slidemarginleft button").click(function(){
var $marginlefty = $(this).next();
$marginlefty.animate({
marginLeft:parseInt($marginlefty.css('marginLeft'),10)==0 ? $marginlefty.outerWidth() : 0
});
});
jQuery中slideToggle()这个动作是从上至下的,如何让它从左至右展开?
没有从左往右的API,但是可以用animate来写
style
#aa{width:200px;height:200px;overflow:hidden;background-color:#000;}
/style
div
id="aa"dddddd/div
a
href="javascript:alr();"点击测试/a
//引入jquery.js
script
var
aa=$("#aa");
var
is_on=true;//默认是展开的
var
aw=aa.width();//获取aa的宽度用于还原
function
alr(){
if(is_on){
aa.stop().animate({width:"0px"},300);
}else{
aa.stop().animate({width:aw},300);
}
}
/script
slide效果本身原理也是通过倒计时来逐渐改变元素的高度来做的。所以同理也可以做左右的
jquery 如何实现折叠菜单
知道你要啥样的,就说个最简单的竖列折叠菜单吧,比如:
菜单1
子菜单1
子菜单2
……
菜单2
子菜单1
子菜单2
……
如果要做这样的折叠菜单 那html为:
div?class="menu"
????div菜单1/div
????ul
????????li子菜单1/li
????????li子菜单2/li
????????……
????/ul
/div
div?class="menu"
????div菜单1/div
????ul
????????li子菜单1/li
????????li子菜单2/li
????????……
????/ul
/div
css为:(没样式只有功能,样式自己去加)
.menu?ul{?display:none}
js为:
$('.menu').click(function(){
????$(this).find('ul').slideToggle();
)}