鼠标移入通过时间控制实现两个不同步的动画效果

//鼠标移入事件,此处使用的是enter,与over不同的是,enter不支持冒泡
$(‘.lis td‘).mouseenter(function(){
$(this).find(‘.tuwz‘).stop().animate({‘margin-top‘:‘-40px‘},500)
//在class名为mis的标签下创建子标签
$(this).find(‘.mis‘).html(‘<div class="yiru">misadidas 定制 <i class="glyphicon glyphicon-circle-arrow-right"></i></div>‘)
$(this).find(‘.yiru‘).css({‘cursor‘:‘pointer‘})
$(this).find(‘.mis‘).css({‘background‘:‘#000‘,‘color‘:‘#fff‘})
//stop:停止之前所有的动作,只执行接下来的动作。
$(this).find(‘.glyphicon‘).stop().animate({‘margin-right‘:‘-10px‘},1000)
}).mouseleave(function(){
$(this).find(‘.tuwz‘).stop().animate({‘margin-top‘:‘0px‘},200)
})

原文地址:https://www.cnblogs.com/amberoid/p/9306340.html

时间: 2024-10-08 07:20:43

鼠标移入通过时间控制实现两个不同步的动画效果的相关文章

【2017-3-30】DOM获取元素 点击、鼠标移入、移出事件 样式控制

1.获取标记对象 + document.getElementById('id'):                        - 获取一个对象 + document.getElementsByClassName('class');      - 获取的是一个数组 + document.getElementsByTagName('标记');          - 获取的也是一个数组 + document.getElementsByName('name');             - 获取的也

[读码时间] 图片列表:鼠标移入/移出改变图片透明度

说明:代码来自网络.注释为笔者学习时添加. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>图片列表:鼠标移入/移出改变图片透明度</title> <style> ul,li{ /*去除内外边距,去除列表默认样式*/ margin:0; padding:0; list-style-type:none; } #imgList{ /

鼠标移入--图片遮罩显示

效果:当鼠标移入图片时,图片被一块半透明黑色块遮住,并显示色块上按钮或文本. 原理:1.将图片位置创建<div>,固定宽高,绝对定位,并添加溢出隐藏. 2.添加两个<div>,第一个<div>用来装图片 3.第二个<div>添加半透明黑色背景,相对定位,并设置宽高.  4.添加js动画控制. 效果图: 代码: 引入jquery. css: ul{list-style: none;} ul>li{width: 100px;height: 120px;te

HTML5+CSS3鼠标移入移出图片生成随机动画

今天分享使用html+css3+少量jquery实现鼠标移入移出图片生成随机动画,我们先看最终效果图(截图为静态效果,做出来可是动态的哟) 左右旋转 上下移动 缩放 由于时间关系我就不一步步解析各段代码所代表含义,我这里就给出一些思路及关键代码: 1.首先使用ul li展现4张图片 本示例中不仅使用了图片,在图片表面还放置了一段“WEB”字样文字,用于与图片实现隐藏或显示效果,故html中每张图片上方加入: <div class="mytext">WEB</div&g

AXURE 图片轮播效果与鼠标移入变色效果

一.轮播 1.选择图片插入→右键单击图片→点击转换为动态面板→双击图片增加状态,轮播多少图就加多少个状态. 2.双击页面属性栏页面交互下的页面载入时→设置面板动态→选择状态2(因为第一个状态是默认的,如果选择将不会循环轮播). 3.双击控件栏状态面板改变时→添加条件为动态面板状态=状态2后确定→设置面板状态→将所有状态全部加上,设好方式和时间,完毕(注意:状态2要添加在最后,其他图片添加顺序随意). 二.鼠标移入指定区域变色(这里指指定区域要回馈动作.如本页的导航当你鼠标移入文文章时,变成白色,

JavaScript 入门练习2:鼠标移入移出改变 div 大小

有一个位于屏幕正中央的红色 div 正方形盒子,宽高为200×200像素,鼠标移入(悬停),正方形会变成400×400像素,鼠标移出,正方形恢复200×200像素. 使用 CSS3.JavaScript 两种方式实现. 效果如下图: 用到的知识点: 1.让盒子居中会用到 margin.padding. 2. :hover 伪类选择器.一个标签后面有一个冒号,又跟着一个东西这样的写法就叫做伪类. :hover 属于锚伪类,锚伪类分为:(以 a 标签为例) a:link {color: #FF000

鼠标移入移出事件

鼠标移入移出事件: mouseover:鼠标移入到目标元素的上方,在其子元素上时也会触发,.所以说也就是说会产生冒泡. <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <style> .parent{height: 400px; width: 400px;border: 1px solid red;}

起止时间控制,显示格式控制

//<script src="<!--{$smarty.const.BASE_PATH}-->/js/public/My97DatePicker/WdatePicker.js"></script> html中引入WdatePicker.js文件 一.开始结束时间相互限制 例1.两个input中时间相关联 <tr> <td>开始时间<label class="must-tag">*</lab

Tuxedo 超时时间控制(转贴)

以下是转贴: ----------------------------------------------------------------------------------------------------------------------------------------------- 源于才文章确实详细,暂且转载于此,谢原发帖主人. Tuxedo 超时控制(转贴)原帖发于DEV2DEV,现转贴在此. TUXEDO超时控制全功略 摘要: 本<功略>集中了TUXEDO应用中,可能涉