<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选择器</title>
<style>
html *{ padding:0px; margin:0px;}
body{ height:100%; width:100%; font-family:Verdana, Geneva, sans-serif; font-size:14px;}
.menu{ border:5px #D2EBFF solid; width:270px; height:600px; position:absolute; left:-260px; padding:10px;}
.menu iframe{ height:100%; width:99.99%;}
</style>
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() 
{  $('#leftmenu').mouseover(function(event){

$(this).animate({left:0},'1000','',function(){});
event.preventDefault(); }).mouseout(function(event){

$(this).animate({left:-260},'1000','',function(){});
event.preventDefault();
});
});
</script></head><body>
<div class="menu" id="leftmenu"><iframe  frameborder="0"></iframe></div></body>
</html>用jquery动画功能做了个滑动导航栏,可是为什么我插入iframe后鼠标放上去后会不停的左右滑动,或者活动两次,我把iframe去掉后就正常了,望朋友们赐教。

解决方案 »

  1.   

    貌似是因为鼠标在iframe上时 对于leftmenu div来说是mouseout……导致鼠标移进去的时候 显示触发mouseover紧接着又出发了mouseout,如此反复……
    最好不要使用iframe了,可以用load方法异步加载进来
      

  2.   

    div里面放入一个iframe后,应该是iframe盖住了div(即便不插入iframe随便插入一个链接或其它标签也是这样)。所以当鼠标放在iframe上后就等于鼠标离开了div,才导致div来回的动。这样理解不知道对不对,呵呵。
      

  3.   

    这个有点奇怪,用event.stopPropagation()阻止冒泡也没有作用。
    不过这样有点用。
        $('#ifrm').mouseover(function(event){
            
            $("#leftmenu").animate({left:-10},'1000','',function(){}); 
            event.stopPropagation();    }).mouseout(function(event){
             
            $("#leftmenu").animate({left:-260},'1000','',function(){});
            event.stopPropagation();
        });