zoukankan      html  css  js  c++  java
  • jQuery的事件与 动画

    什么是事件:
    事件的本质是委托。
    Jquery的 方法:
    $().css();
    $().click();
    等等。
        鼠标的事件:
    区别在于:mouseover与mouseout再进入或离开后会执行这两个事件;
     mouseenter与mouseleave在进入或离开后代元素不会执行这两个事件
        //鼠标的事件:
        //mouseover和mouseout与mouseenter和mouseleave的区别
        
        //$(".nav").mouseover(function(){
        /*     console.log("mouseover");
        }).mouseout(function(){
            console.log("mouseout");
        }); */
        
            /* $(".nav").mouseenter(function(){
                console.log("mouseenter");
                
                
            }).mouseleave(function(){
                console.log("mouseleave");
                
            }); */
            
        //键盘事件:
        $("input").keyup(function(event){
            alert(event.KeyCole);
        });
    
    //浏览器大小事件resize
            $/* (window).resize(function(){
                            if ($(window).width()>=1024) {
                                $('body').css("background","pink");
                            }else{
                                $('body').css("background","red");
                            }
                             
                         }); */
    
            //复合事件:hover用于模拟鼠标指针移入和移除事件。
            /* $("li").hover(function() {
                $(this).css("background", "pink");
            }, function() {
                $(this).css("background", "");
            }); */
    
            //toggle()的方法。带参数用于模拟鼠标连续的click
    
    事件。
            /* $('body').toggle(function() {
                //alert(1);
                $(this).css("background","pink");
            }, function() {
                $(this).css("background","red");
            }, function() {
                 $(this).css("background","blue");
            }); */
            
            //toggle()不带参数和hide(),show()方法一样。
            /* $("#btn").bind("click", function() {
                $("ul").toggle();
            }); */
    
    //自定义动画函数animate
        /* $(function() {
            $('#book').animate({
            //透明度0.25
                opacity: 0.25,
                left: '+=50',
                height: 'toggle'
              }, 5000, function() {
                  
              });     */
    
        $("#book").animate({"height":"500px"},{queue:true,duration:2000})
        .animate({"width":"50px"},{queue:true,duration:2000})
        .animate({"font-size":"30px"},{queue:false,duration:2000});
        });
  • 相关阅读:
    开发者看过来,哪个移动平台好赚钱?
    EGit下配置Github项目
    用户接口(UI)设计的 20 条原则
    要想工作效率高,我们到底需要多少睡眠?
    Android 读取<metadata>元素的数据
    Android实现推送方式解决方案
    余晟:做个懂产品的程序员
    Gson简要使用笔记
    编程从业五年的十四条经验,句句朴实
    程序员不是包身工
  • 原文地址:https://www.cnblogs.com/www-yang-com/p/9285711.html
Copyright © 2011-2022 走看看