标签:
用于显示页面元素与之相对应的hide() 测试案例:
<p title="标题">测试</p>
<ul style="display: none">
<li title=‘苹果‘>苹果</li>
<li title=‘橘子‘>橘子</li>
<li title=‘菠萝‘>菠萝</li>
</ul>
点击显示
$(‘p‘).bind("click",function(){
$("ul").show();
})
点击切换效果
$(‘p‘).toggle(function(){
$("ul").show();
},function(){
$("ul").hide()
})
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)
$(‘#test‘).click(function(){
$("ul").toggle();
})
————————————————
slideDown
$(‘p‘).toggle(function(){
$("ul").slideUp()
},function(){
$("ul").slideDown();
})
演示代码:
$(‘#test‘).toggle(function(){
$(this).next().slideUp() ----注意这里和上边的写法不同之处
},function(){
$(this).next().slideDown();
})
注意的和之前的隐藏显示一样,这里也有简化版
$(‘#test‘).click(function(){
$("ul").slideToggle()
})
——————————————
fadeIn fadeOut---淡入淡出效果
$(‘#test‘).toggle(function(){
$(this).next().fadeOut();
},function(){
$(this).next().fadeIn();
})
——觉得之前的动画效果不满意,好吧,我们看这里,自定义动画效果
自定义移动的案例:
<div id="test"></div>
#test{
position: absolute;
width: 100px;
height: 100px;
border: 1px solid red;
background-color: gray;
}
$(‘#test‘).click(function(){
$(this).animate({left:"500px"},3000)
})
$(‘#test‘).click(function(){
$(this).animate({left:"200px",height:"200px"},3000)
})
案例2:
<button id="left">?</button> <button id="right">?</button>
<div id="test"></div>
$(‘#left‘).click(function(){
$("#test").animate({left:"-500px"},3000)
})
$(‘#right‘).click(function(){
$("#test").animate({left:"500px"},3000)
})
标签:
原文地址:http://www.cnblogs.com/haonantong/p/4690539.html