复合事件与显示效果

复合事件与显示效果

复合事件

​ hover(f1,f2):切换使用mouseover和mouseout()
​ toggle(f1,f2,f3,fn):版本问题(jquery1.9以前支持)
​ 多个click()事件,toggle()还有其他含义(隐藏与显示)

$(function(){
                $("#h1").mouseover(function(){
                    alert("悬浮");
                });
});

                $("#h1").hover(function(){alert("悬浮")},function(){alert("离开")});
                /*$("body").toggle(function(){
                    $(this).css("background-color","red");
                    
                },function(){
                    $(this).css("background-color","yellow");
                    
                },function(){
                    $(this).css("background-color","green");
                    
                });*/

显示效果

形式:hide([速度],[回调函数]);
​ 其中速度:可以是数字(毫秒),也可以是单词(fast normal slow,注意加双引号)
​ hide():隐藏
​ show:显示
​ toggle:切换隐藏与显示
​ 淡入淡出 (透明度)
​ fadeIn():淡入 显示
​ fadeout:淡出 隐藏

​ 控制高度
​ slideDown():下拉,显示
​ slideUp():上拉 隐藏
总结显示问题:
​ 显示:show() fadeIn() slideDown()
​ 隐藏:hide() dadeout() slideUp()

function myShow(){
//              $("h3").show(3000,myCallBack);
                //$("h3").slideDown(3000);//下拉
                //$("h3").fadeIn(3000);//淡入
            }
            
            function myCallBack(){
//              alert("显示完毕");
            };
            
            function myHide(){
//              $("h3").hide(3000);
                //$("h3").slideUp(3000);//上拉
                //$("h3").fadeOut(3000);//淡出
            }

例:


    
        
        
    
    
        

我是h1

h3h3

color1

$(function(){ $("#h1").mouseover(function(){ alert("悬浮"); }); }); $(document).ready(function(){ $("#h1").hover(function(){alert("悬浮")},function(){alert("离开")}); //hover:等效于mouseover与mouseout //toggle循环单击事件click /*$("body").toggle(function(){ $(this).css("background-color","red"); },function(){ $(this).css("background-color","yellow"); },function(){ $(this).css("background-color","green"); });*/ //toggle:还具备隐藏于显示 /*hide:隐藏 show:显示 toggle:隐藏于显示*/ $("#color1").css({"color":"red","font-size":"100px","background-color":"gray"}) }); // 显示与隐藏: function myShow(){ // $("h3").show(3000,myCallBack); //$("h3").slideDown(3000);//下拉 //$("h3").fadeIn(3000);//淡入 } function myCallBack(){ // alert("显示完毕"); }; function myHide(){ // $("h3").hide(3000); //$("h3").slideUp(3000);//上拉 //$("h3").fadeOut(3000);//淡出 } //控制高度 /*slideDown:下拉 显示 slideUp:上拉 隐藏*/ //操作DOM /* a.样式操作(设置css) jquery对象.css("属性名","属性值"); jquery对象.css({"属性名":"属性值","属性名":"属性值",...,"属性名":"属性值"}); */ /*ii.追加或移除样式class addClass("x"); addClass("x x x"); removeClass("x); removeClass("x x x""); removeClass();移除全部样式*/