❋JQuery的快速入门2 jq动画与案例

目录

 

jq自定义动画【animate,stop】

 案例1:大小图标

案例2:动态增加删除数据

案例3:动态留言与删除

案例4:动态进度条

案例5:点击三个相同的图片进行消除

jq自定义动画【animate,stop】

animate({样式},时间);

样式还是css的样式,样式名变为驼峰命名法【将 - 后的第一个字母变为大写】

样式不分开写则一起进行变化,若分开则一步一步进行

stop([clearQueue],[gotoEnd])




    
    
    
    Document
    


    
    
    
    
    
    
Hello!

 案例1:大小图标

❋JQuery的快速入门2 jq动画与案例_第1张图片

当鼠标经过时图标变大




    
    
    
    Document
    


    
    
  • 案例2:动态增加删除数据

    
    
    
        
        
        
        Document
        
    
    
        
        课程名称: 
        所属学院 
        
        
    课程名称 所属学院 已完成
    javascript 计算机工程学院
    Python Web 计算机工程学院
    地铁运行原理 轨道交通学院

    没有做到当输入数据为空时的校验 

    案例3:动态留言与删除

    ❋JQuery的快速入门2 jq动画与案例_第2张图片

    当鼠标经过删除时,删除变蓝【与js那里的思路相同】 

    
    
    
        
        
        
        Document
        
    
    
        
        
        
        

    案例4:动态进度条

    bb1ab143577c40deaf1e056da0b6c2c0.png

    向div中放入一个span,通过不断放大width达到进度条 

    
    
    
        
        
        
        Document
        
    
    
        
        
        

    案例5:点击三个相同的图片进行消除

    ❋JQuery的快速入门2 jq动画与案例_第3张图片❋JQuery的快速入门2 jq动画与案例_第4张图片

    获取点击到图片的src,为点击到的图片设置一个样式用作标记,若无该标记则加入数组,有则不加入,数组每满三个进行消除,随后清空数组与样式

    
    
    
    
        
        
        
        Document
        
    
    
    
        
        


     

     

    你可能感兴趣的:(jquery,前端,javascript)