为了账号安全，请及时绑定邮箱和手机
jQuery animate()，鼠标移入执行动画---div有两个子级，鼠标移入div，动画为什么执行多次？求指导
&li class="one"&&a href=""&文字一&/a&&/li&
&li class="two"&&a href=""&文字二&/a&&/li&
list-style:
margin: 0;
padding: 0;
text-decoration:
color: #333333;
width: 200
height: 20
background-color: #e0e0e0;
margin-top: 100
font-size: 20
text-align:
line-height: 20
font-size: 20
text-align:
line-height: 20
margin-left: 40
}&script src="../js/jquery-1.11.0.min.js"&&/script&
$(document).ready(function () {
$("ul").mouseover(function () {
$(this).animate({marginLeft:"15px"});
$("ul").mouseout(function () {
$(this).animate({marginLeft:"0"});
&/script&怎让让鼠标移入ul，执行一次动画，直到鼠标移出ul后，执行过的动画回到原来位置？求指导！
mouseover进入子元素会冒泡到父元素，然后就会重复触发。使用mouseenter代替、
你还没有登录，请先登录或注册慕课网帐号
$("ul").mouseover(function () {
$(this).animate({marginLeft:"15px"}).animate({marginLeft:"-15px"});//此处修改
$("ul").mouseout(function () {
$(this).animate({marginLeft:"0"});
你还没有登录，请先登录或注册慕课网帐号
59661人关注
23003人关注
Copyright (C) 2018 imooc.com All Rights Reserved | 京ICP备 号-11JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
转载 &更新时间：日 11:14:08 & 作者：回不倒過去
这篇文章主要介绍了JS+CSS实现鼠标经过弹出一个DIV框的实现方法,带缓冲渐变动画效果,涉及鼠标事件的响应及结合时间函数定时触发形成动画渐变效果的相关技巧,需要的朋友可以参考下
本文实例讲述了JS+CSS实现鼠标经过弹出一个DIV框效果。分享给大家供大家参考，具体如下：
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&js+CSS实现表格渐变&/title&
color:#FFF;
font-size:12
background-color:#000;
border:1px solid #DEF;
filter:Alpha(Opacity=0);
opacity:0;
z-index:999;
&script type="text/javascript"&
//定义“获得指定dom节点”的函数，因为其重用率高
function $(d){return document.getElementById(d);}
//控制div逐渐显示
var i = 0;
function change_show(){
var obj = $("tip");
i=i+5; //逐渐显示速度
obj.style.filter = "Alpha(Opacity=" + i + ")"; //透明度逐渐变小
obj.style.opacity = i/100; //兼容FireFox
if(i&=100){
clearInterval(s);
//控制div逐渐消失
var j = 100;
function change_hidden(){
var obj = $("tip");
j=j-5; //逐渐消失速度
obj.style.filter = "Alpha(Opacity=" + j + ")"; //透明度逐渐变大
obj.style.opacity = j/100; //兼容FireFox
clearInterval(h);
//obj.style.display="none";
//控制change_show()行为
function show(){
if(s){clearInterval(s);}
$("tip").style.display="block";
s = setInterval(change_show,1);
//控制change_hidden()行为
function hiddentip(){
$("tip").innerHTML="";
h = setInterval(change_hidden,1);
鼠标滑过这里，渐变出现
&div id="tip" style="background-color:width:48%;height:48%;" onmouseover="show();" onmouseout="hiddentip();"&
PS:上述代码没有进行格式化的排版处理，对此小编给大家提供了一款本站的js代码在线压缩、格式化与加密工具，非常强大实用：
JavaScript压缩/格式化/加密工具：
上面这款js工具中的加密功能可实现js代码的eval函数加密形式，对此本站还提供了如下这款针对eval函数加密的解密工具，非常强大实用！
js的eval方法在线加密解密工具：
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》及《》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具22:56 提问
JS如何给div加鼠标移出事件
如何给鼠标移出整个navlist添加事件，而不是移出div的某个li加事件
按赞数排序
如果是jquery用mouseleave事件，而不是mouseout，要不移动到子元素也会触发
纯js要判断是佛移动到子元素上，子元素return退出事件，看这个：
var navlist = document.getElementById('navlist');
//navlist是ID
navlist.onmouseover = function (){
navlist.style.display = 'block';
//这里面写效果
准确详细的回答，更有利于被提问者采纳，从而获得C币。复制、灌水、广告等回答会被删除，是时候展现真正的技术了！
其他相关推荐怎么让鼠标移动到隐藏的div依然不会触发onmouseout？【web前端开发吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：50,315贴子：
怎么让鼠标移动到隐藏的div依然不会触发onmouseout？收藏
我将鼠标移动到一个图片，将显示一个二维码，然后把鼠标移开二维码消失，但是怎么让鼠标移动到二维码上，令它不消失？
千锋web前端开发,名企内部推荐就业,入学签订就业协议,2周免费试学!千锋web前端开发,20周快速成为高级开发工程师,就业“薪”踏板!
onmouseout 会自动触发？
可以用css的hover，也可以用div.onmouseover的时候显示，div.onmouseout的时候就隐藏，不是这样吗
给二维码一个移入事件，，在图片移出之前触发，，给图片移出一个判断条件，在二维码移入时改变条件
给二维码设置一个定时器，延时消失，setTimeout();
51CTO学院12年行业品牌,1600万用户选择,中国专业IT技能学习平台.web前端开发资深大牛授课,0基础从入门到精通,web前端开发报名与培训中心.
写html时候把两个放一起，事件委托给它们父集，就不用去处理mouseout时候状态了啊
直接用hover吧
学无止境，可以加q群一起探讨:，每天都有大神免费授课。
首先那个图片和二维码是同级关系就可以 移走全部消失 只要鼠标还在那个div上一直在
看看我这个不知道适不适合你这种情况
登录百度帐号为了账号安全，请及时绑定邮箱和手机
点击这里，将文章分享到自己的动态
纯CSS3实现鼠标滑过实现TIP提示框动画（transition：margin方法）
首先html结构：
&div id="container"&
&div class="item"&
&h1&Hi&/h1&
&div class="tooltip"&
&p&我是一个提示框！&/p&
&div class="arrow"&&/div&
首先我们给父级元素container设置一下样式：
#container{width:130margin:100px auto 0}
然后给div类名为item的设置一下样式：
{width:100 height:100 margin:15 background:#73a058; float: border-radius:50}
H1元素样式：
h1{display:inline-width:100%;height:100%;line-height:100text-align:color:#font-size:50}
OK ,到现在，我们页面首先展示的内容基本样式设置完毕，剩下的就是tip提示框的样式及效果的实现--------------------------
首先我们tip是通过鼠标移动到item上，tip从上往下滑动到item元素的上方，那么我们需要给item设置一个绝对定位，让它定位在item上方，但是不能只定位在上方，因为我们在鼠标滑动上去的时候有一个从上往下的效果，所以需要设置一个负的margin值，至少这个负值要大于item的高度；
.tooltip {width:120 padding:10 border-radius:3 position: box-shadow:1px 1px 10px 0 # margin: -400px 0 0 -20 background:#
-webkit-transition:margin .5s ease-in-
-moz-transition:margin .5s ease-in-}
上面代码中，有的同学不理解为什么会有一个margin值等于-20px的左边距，因为我们item是100的宽度；然而我们tooltip是120的宽度，还有一个10px的padding值，所以一起是140的宽度，如果不进行-20px的位移，那么就不相对于item居中了，所以向左边移动了20px的距离，让整体相对于item居中；
还有一个新属性，可能我们在平时用到的很少，因为很多同学可能用transition属性的时候，可能基本上就这样写：transition:2s;这样是一个简写写法，就是告诉元素所有涉及到动画的属性都是2S时间，那么我们这里给了一个限制就是告诉这个元素我只在margin属性上产生这个效果；
然后给item设置hover效果：
.item:hover{background:#6d643b;}
给item下的tooltip设置hover效果：
.item:hover .tooltip {
margin:-110px 0 0 -20
-webkit-transition: margin .25s ease-in-
-moz-transition: margin .25s ease-in-}
上面的代码：首先选择器讲解，我们item:hover后面写了一个tooltip，意思是我鼠标移动到item元素上，然后给item里面的元素tooltip设置了一些样式，样式就是让tooltip的margin值发生变化，
最后一步了：
margin:10px 0 0 50
height: 0;
border-left: 10
border-right: 10
border-top: 10px solid #
这串代码是实现文中出现的倒三角形状，具体的transparent用法同学们自己去搜用法，这里就不讲解了，
OK到这里基本上一个简单的效果就完成了，是不是又学到了css3属性的一些新用法了呢？
同学们也可以去修改效果的，比如说用opacity来实现，用CSS3的transform:scale放大缩小来做，更炫哦
若觉得本文不错，就分享一下吧！
评论加载中...
相关文章推荐
正在加载中
Web前端工程师
作者相关文章