最近在开发小程序,遇到一个很郁闷的问题,记得以前在做对标签(div)的显示和隐藏,这种简单的问题是很容易解决的,但在小程序上只能自己写样式来控制或者写小程序动画来做效果。
以前可以简单的在css样式里添加,display:none;直接把一个div或其它的标签隐藏,然后再用display:block;再显示,这是操作div的显示和隐藏是最简单的方式,或者使用js,jquery都有简单的自带方法"hide(),show()"来实现。
下面来回忆回忆使用jquery是一件多么幸福的事啊:
谈入谈出:fadeIn(), fadeOut(), fadeToggle(), fadeTo(),有这四个方法
fadeIn() //是谈入的效果,可以让一个隐藏的标签,谈谈的出现显示
$("#button").click(function(){ // 谈入
$(".div1").fadeIn();
$(".div2").fadeIn("slow"); //slow自带的标准时间内完成
$(".div3").fadeIn(3000); //3秒内显示完
});
fadeOut() // 是谈出效果,可以让一个显示的标签,慢慢的隐藏掉
$(".button").click(function(){
$(".div1").fadeOut();
$(".div2").fadeOut("slow");
$(".div3").fadeOut(3000);
});
fadeIn()与fadeOut()必须配对的使用,才能完成起作用
fadeToggle() //它有点像开关的效果
//比如:现在标签(div)是显示的,点击绑定的标签(div)就是隐藏了,再点击就又显示了。
$(".button").click(function(){ // 可以连续的操作,相当于上面的fadeIn()与fadeOut()配对使用
$(".div1").fadeToggle();
$(".div2").fadeToggle("slow");
$(".div3").fadeToggle(3000);
});
fadeTo() //增加了对透明度的支持
$(".button").click(function(){
$(".div1").fadeTo("3000",0.15); //3秒内要完成的透明度
$(".div2").fadeTo("2000",0.4);
$(".div3").fadeTo("slow",0.7);
});
网友评论