jQuery学习小结1（jQuery效果）

//名称冲突自己命名
var jo=$.noConflict();
jo(document).ready(function(){
jo("#button").click(function(){
jo("p").hide();
});
});

//隐藏和显示
$(document).ready(function(){
//$("p").hide(1000);
$("p").show(1000);
$("p").toggle();
})

//淡入淡出
$(document).ready(function(){
$("#button").click(function(){

//$("p").fadeIn();
$("p").fadeOut();
//$("p").fadeToggle();//反向
$("p").fadeTo("slow",0.1);//可以设置透明度

});

});

//上下滑动
$(document).ready(function(){
$("#button").click(function(){
$(".bbb").slideDown("slow");
$(".bbb").slideUp("slow");
$(".bbb").slideToggle("slow");
});
});

//动画特效可以操作多个属性
$(document).ready(function(){
$("#button").click(function(){
$(".bbb").animate({
//left:'250px',
//height:'toggle',//使用预定义的值
//height:'+=150px',//使用相对的值
//width:'+=250px',//使用相对的值
//opacity:'0.5' //透明度的变化
})
})});

//动画特效使用队列功能
$(document).ready(function(){
$("#button").click(function(){
var div=$(".bbb");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");

});

});

//停止功能
$(document).ready(function(){
$("#button").click(function(){
var div=$(".bbb");
div.animate({left:'100px'},5000);
div.animate({fontSize:'3em'},5000);
});
$("#button1").click(function(){
$(".bbb").stop();//停止当前动画但允许队列下的动画继续执行
$(".bbb").stop(true);//停止所有动画
$(".bbb").stop(true,true);//停止后面的动画当前动画立即执行完毕
});
});

//callback和chaining
$(document).ready(function(){
$("#button").click(function(){

$("p").hide(2000,function(){//callback函数100%完成之后执行
    alert("想你了");
}).show("slow");//链接技术
});

});

jQuery学习小结1（jQuery效果）

推荐阅读更多精彩内容