gpt4 book ai didi

javascript - jquery hide()/show() 动画不断重复

转载 作者:行者123 更新时间:2023-11-29 18:06:53 25 4
gpt4 key购买 nike

我是 jquery 的新手,所以我遇到了一些问题。我正在尝试创建一个 HTML,如果用户将鼠标悬停在 div 组件上,则会显示一个列表。但问题是,如果我移动我的将鼠标悬停在 div 上,然后列表反复出现和消失。感谢您提前帮助我。

这是我的 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>

最佳答案

您需要使用 mouseentermouseleave而不是 mouseovermouseout

$(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>


您还可以使用 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>

关于javascript - jquery hide()/show() 动画不断重复,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30542455/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com