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. Linux中的库

    一.基本概念 1.1.什么是库        在 windows 平台和 linux 平台下都大量存在着库. 本质上来说库是一种可执行的二进制代码(但不可以独立执行),可以被操作系统载入内存执行. 由 ...

  2. hackerrank---Sets - Symmetric Difference

    题目链接 集合操作 附上代码: M = int(input()) m = set(map(int, raw_input().strip().split())) N = int(input()) n = ...

  3. docker安装 2016-11-06 19:14 299人阅读 评论(31) 收藏

    Docker支持运行在以下CentOS版本: CentOS 7.X 安装在二进制兼容的EL7版本如 Scientific Linux也是可能成功的,但是Docker 没有测试过并且不官方支持. 此文带 ...

  4. [Java]ssh网上商城总结 标签: hibernatessh 2016-05-15 21:03 1099人阅读 评论(32)

    前几日敲完了ssh网上商城,虽然现在已经敲完了整个系统,却发现自己对于ssh,了解的一点都不多,什么是struts2,什么是spring,什么是hibernate,自己都是稀里糊涂,然后看了一下后面的 ...

  5. 关于inflate的第3个参数

    关于inf 方法 inflate(int resource, ViewGroup root, boolean attachToRoot) 中,前连个参数都好理解,我比较费解的是第3个参数. 文档中的解 ...

  6. redis :read error on connection

    最近做了一个多人竞拍的小功能  因为以前没做过 所以踩了很多坑用的是 mysql + php + redis 实现的竞拍功能 这里先说一下踩得第二个坑redis  的原因  真是欲哭无泪  解决完一个 ...

  7. linux下安装composer以及使用composer安装laravel

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/nianzhi1202/article/details/72770099 一.安装composer之前 ...

  8. XAML 特效

    <Window x:Class="WpfApp5.MainWindow" xmlns="http://schemas.microsoft.com/winfx/200 ...

  9. 2018-9-30-VisualStudio-使用多个环境进行调试

    title author date CreateTime categories VisualStudio 使用多个环境进行调试 lindexi 2018-09-30 18:39:26 +0800 20 ...

  10. Flask学习之五 用户登录

    英文博客地址:http://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-v-user-logins 中文翻译地址:http:// ...