码迷,mamicode.com
首页 > 其他好文 > 详细

复合事件与显示效果

时间:2019-12-22 16:53:39      阅读:132      评论:0      收藏:0      [点我收藏+]

标签:问题   javascrip   mouseover   dcl   显示   out   dad   back   round   

复合事件与显示效果

复合事件

? 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);//淡出
            }

例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body >
        <h1 id="h1">我是h1</h1>
        <h3>h3h3</h3>
        <p id="color1">color1</p>
        <p id=""></p>
        
        <button onclick="myShow()">显示</button>
        <button onclick="myHide()">隐藏</button>
        <script type="text/javascript" src="jquery-3.4.1.js"></script>
        <script type="text/javascript">
            $(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();移除全部样式*/

        
        
        </script>
    </body>
</html>

复合事件与显示效果

标签:问题   javascrip   mouseover   dcl   显示   out   dad   back   round   

原文地址:https://www.cnblogs.com/x-i-n/p/12080020.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!