jQuery hide（）/ show（）动画不断重复

Question

I am pretty new to jquery so I am facing some problems.I am trying to create a HTML in which if a user hover the mouse over a div component then a list is shown.But the problem is that if I move my mouse over the div then the list appears and disappears repeatedly.Thanks for helping me in advance. 我对jQuery很陌生，因此遇到了一些问题。我正在尝试创建一个HTML，如果用户将鼠标悬停在div组件上，则会显示一个列表。但是问题是，如果我将鼠标移到div然后列表出现并反复消失。谢谢您的帮助。

Here is my html code:- 这是我的html代码：-

 $(function(){ var det={ firstname:'Gunjan', lastname:'Dutta Bhowmick' }; $('ul').hide(); $('ul').css({ 'background-color':'blue', 'border':'2px solid green' }); $('li').css({ 'color':'red' }); $('div div').mouseover(function(){ var id ='#'+$(this).attr('id')+' ul'; $(id).fadeIn(); }).mouseout(function(){ var id ='#'+$(this).attr('id')+' ul'; $(id).fadeOut(); }); $('html').dblclick(function(){ alert(det.firstname+" "+det.lastname); }); });

 .features{ width: 1200px; height: 90px; margin-top:5px; } #Hobbs{ width: 300px; height: 90px; background: green; display: inline-block; position:absolute; top: 10px; } #Lang{ width: 300px; height: 90px; background: red; display: inline-block; position:absolute; top: 10px; left:310px; } #Fri{ width: 300px; height: 90px; background: yellow; display: inline-block; position:absolute; top: 10px; left:610px; } li{ color: green; width: 300px; display: inline-block; } p{ display: inline-block; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> <head> <title>SimpleNav</title> <link rel="stylesheet" type="text/css" href="styles.css"/> <script src="../jquery-1.6.3.min.js"></script> <script src="main.js" ></script> </head> <body> <div class="features"> <div id="Hobbs"> <p>Hobbies</p> <ul class="hlist"> <li>Programming</li> <li>Playing Games</li> <li>Listening Music</li> <li>Playing Outdoor Games</li> </ul> </div> <div id="Lang"> <p>Language</p> <ul class="llist"> <li>JAVA</li> <li>C</li> <li>JAVASCRIPT</li> <li>HTML</li> <li>JQUERY</li> <li>CSS</li> </ul> </div> <div id="Fri"> <p>Friends</p> <ul class="frlist"> <li>Rohan</li> <li>Prithwish</li> <li>Souparna</li> <li>Priyo</li> <li>Sayantan</li> </ul> </div> </div> </body>

Answer 1

You need to use mouseenter and mouseleave instead of mouseover and mouseout 您需要使用mouseenter和mouseleave而不是mouseover和mouseout

 $(function() { var det = { firstname: 'Gunjan', lastname: 'Dutta Bhowmick' }; $('ul').hide(); $('ul').css({ 'background-color': 'blue', 'border': '2px solid green' }); $('li').css({ 'color': 'red' }); $('div div').mouseenter(function() { $('ul', this).stop().fadeIn(); }).mouseleave(function() { $('ul', this).stop().fadeOut(); }); $('html').dblclick(function() { alert(det.firstname + " " + det.lastname); }); });

 .features { width: 1200px; height: 90px; margin-top: 5px; } #Hobbs { width: 300px; height: 90px; background: green; display: inline-block; position: absolute; top: 10px; } #Lang { width: 300px; height: 90px; background: red; display: inline-block; position: absolute; top: 10px; left: 310px; } #Fri { width: 300px; height: 90px; background: yellow; display: inline-block; position: absolute; top: 10px; left: 610px; } li { color: green; width: 300px; display: inline-block; } p { display: inline-block; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> <div class="features"> <div id="Hobbs"> <p>Hobbies</p> <ul class="hlist"> <li>Programming</li> <li>Playing Games</li> <li>Listening Music</li> <li>Playing Outdoor Games</li> </ul> </div> <div id="Lang"> <p>Language</p> <ul class="llist"> <li>JAVA</li> <li>C</li> <li>JAVASCRIPT</li> <li>HTML</li> <li>JQUERY</li> <li>CSS</li> </ul> </div> <div id="Fri"> <p>Friends</p> <ul class="frlist"> <li>Rohan</li> <li>Prithwish</li> <li>Souparna</li> <li>Priyo</li> <li>Sayantan</li> </ul> </div> </div>

You can also use the shorthand version provided by jQuery .hover() 您还可以使用jQuery .hover（）提供的速记版本。

$('div div').hover(function () {
    $('ul', this).stop().fadeIn();
}, function () {
    $('ul', this).stop().fadeOut();
});

 $(function() { var det = { firstname: 'Gunjan', lastname: 'Dutta Bhowmick' }; $('ul').hide(); $('ul').css({ 'background-color': 'blue', 'border': '2px solid green' }); $('li').css({ 'color': 'red' }); $('div div').hover(function() { $('ul', this).stop().fadeIn(); }, function() { $('ul', this).stop().fadeOut(); }); $('html').dblclick(function() { alert(det.firstname + " " + det.lastname); }); });

 .features { width: 1200px; height: 90px; margin-top: 5px; } #Hobbs { width: 300px; height: 90px; background: green; display: inline-block; position: absolute; top: 10px; } #Lang { width: 300px; height: 90px; background: red; display: inline-block; position: absolute; top: 10px; left: 310px; } #Fri { width: 300px; height: 90px; background: yellow; display: inline-block; position: absolute; top: 10px; left: 610px; } li { color: green; width: 300px; display: inline-block; } p { display: inline-block; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> <div class="features"> <div id="Hobbs"> <p>Hobbies</p> <ul class="hlist"> <li>Programming</li> <li>Playing Games</li> <li>Listening Music</li> <li>Playing Outdoor Games</li> </ul> </div> <div id="Lang"> <p>Language</p> <ul class="llist"> <li>JAVA</li> <li>C</li> <li>JAVASCRIPT</li> <li>HTML</li> <li>JQUERY</li> <li>CSS</li> </ul> </div> <div id="Fri"> <p>Friends</p> <ul class="frlist"> <li>Rohan</li> <li>Prithwish</li> <li>Souparna</li> <li>Priyo</li> <li>Sayantan</li> </ul> </div> </div>

Answer 2

You have to use mouseenter and mouseleave function. 您必须使用mouseenter和mouseleave函数。 You can try the on method 您可以尝试使用on方法

$('div div').on({
        mouseenter: function() {
            // Handle mouseenter...
        },
        mouseleave: function() {
            // Handle mouseleave...
        }
    });

You can get more about on method here jQuery On 您可以on此处获得有关jQuery方法的更多信息

jQuery hide（）/ show（）动画不断重复

问题描述

2 个解决方案

解决方案1
4 已采纳 2015-05-30 05:05:18

解决方案2
0 2015-05-30 05:08:18

jQuery hide（）/ show（）动画不断重复

问题描述

2 个解决方案

解决方案1 4 已采纳 2015-05-30 05:05:18

解决方案2 0 2015-05-30 05:08:18

解决方案1
4 已采纳 2015-05-30 05:05:18

解决方案2
0 2015-05-30 05:08:18