css

.category > div.active {
animation: servicetobig 0.5s ease 1 forwards;
}
@keyframes servicetobig {
100% {
transform: scale(1.1);
box-shadow: 0px 0px 10px #ccc;
z-index: 1000;
}
}

js

 $(".categoryDiv").mouseenter(function(){
$(this).addClass("active").siblings().removeClass("active")
}).mouseleave(function(){
$(this).removeClass("active")
})

一排盒子,jq鼠标移入的盒子动画移出停止动画,css动画的更多相关文章

  1. JavaScript--获取页面盒子中鼠标相对于盒子上、左边框的坐标

    分析: 外层边框是浏览器边框,内部盒子是页面的一个盒子,绿点是盒子中鼠标的位置.鼠标相对盒子边框的坐标=页面中(注意不是浏览器)鼠标坐标-盒子相对于浏览器边框的偏移量 第一步:求浏览器边框位置 x=e ...

  2. jq鼠标移入和移出事件

    前几天帮朋友做了一个单页面,其中有个效果就是鼠标移动到头像上变换头像样式,当鼠标移出时恢复头像样式.当时没多想,脑子就蹦出了mouseover,mouseout两个方法. 但是在编写页面的过程中,无论 ...

  3. checkbox下面的提示框 鼠标移入时显示,移出时隐藏

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  4. jq鼠标移入移除事件

    mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件.只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseout ...

  5. jq鼠标移入移除

    ele.on({ mouseover : function(){ } , mouseout : function(){ } })

  6. CSS3动画效果——js调用css动画属性并回调处理详解

    http://www.jb51.net/css/258407.html 这篇文章主要详细介绍了CSS3动画效果回调处理,需要的朋友可以参考下 我们在做js动画的时候,很多时候都需要做回调处理,如在一个 ...

  7. 盒子端 CSS 动画性能提升研究

    不同于传统的 PC Web 或者是移动 WEB,在腾讯视频客厅盒子端,接大屏显示器(电视)下,许多能流畅运行于 PC 端.移动端的 Web 动画,受限于硬件水平,在盒子端的表现的往往不尽如人意. 基于 ...

  8. CSS动画效果的回调

    用纯JS实现动画效果代码量大,计算复杂.因此现在前端页面的动画效果一般都采用CSS来实现. CSS动画实现简单高效,但是在处理动画,控制动画过程上却缺少一些有效手段. 例如我们想在动画效果完成时调用回 ...

  9. vue中css动画原理

    显示原理: <transition name='fade'> <div v-if='show'>hello world</div> </transition& ...

随机推荐

  1. 值得研究的J2EE开源项目推荐

    导读:笔者在学习J2EE的过程中发现了一些很有用,而且很值得学习的开源项目,在此推荐给大家. 关键词:J2EE 开源项目 J2SE JBoss SOA EJB   这篇文章写在我研究J2SE.J2EE ...

  2. pl/sql基础知识—触发器

    n  触发器简单介绍 触发器是指隐含执行的存储过程,它不是由程序员或者是DBA来显式调用,而是因为某个操作引发执行的.当定义触发器时,必须要指定触法的事件和触发的操作,常用的触发事件包括insert, ...

  3. Linux进程管理(三、 线程)

    // ---- refer glibc, pthread_create.c ----// int __pthread_create_2_0 (newthread, attr, start_routin ...

  4. WPF程序国际化

    1.创建相应的xaml文件 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presen ...

  5. LeetCode172 Factorial Trailing Zeroes. LeetCode258 Add Digits. LeetCode268 Missing Number

    数学题 172. Factorial Trailing Zeroes Given an integer n, return the number of trailing zeroes in n!. N ...

  6. Otracle数据库定时任务--dbms_job

    一.dbms_job涉及到的知识点 1.创建job: variable jobno number; dbms_job.submit(:jobno, --job号 'your_procedure;'-- ...

  7. HTML5入门指南

    1.HTML5到底是什么? HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定.目标是取代1999年所制定的HTML 4.01和XHTML 1.0标准,以期能在互联 ...

  8. Redis 设置密码登录

    前言 redis在生产环境中通常都会设置密码以保证一定的安全性,本篇blog就简单记录一下如何在redis中设置客户端登录密码. 修改redis.conf RT,打开redis.conf文件,搜索re ...

  9. 容器化ICT融合初体验

    [编者的话]本次将分享的容器化ICT融合平台是一种面向未来ICT系统的新型云计算PaaS平台,它基于容器这一轻量级的虚拟化技术以及自动化的"微服务"管理架构,能够有效支撑应用快速上 ...

  10. Python数据集变量及相关含义