gpt4 book ai didi

javascript - 使用 Jquery 仅在选中时为一个元素设置动画

转载 作者:太空宇宙 更新时间:2023-11-04 10:01:19 25 4
gpt4 key购买 nike

所以我试图更好地使用 javascript 和 jquery,所以我尝试实现一点动画。我在一个列表中有 2 个 div,我的目标是,当鼠标悬停在其中一个 div 上时,它会设置动画宽度以将其拉伸(stretch),当鼠标离开时,div 仍会拉伸(stretch),直到鼠标进入另一个 div,新的 div 将在其中展开,另一个将恢复到原来的大小。我已经设法让 div 在用鼠标进入和离开它们时扩展和调整大小,但是当试图实现一种方式以便在任何时候只能扩展一个 div 时,我似乎永远无法让它工作。

到目前为止,这是我的代码:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<style type="text/css">

li {
padding-top: 30px;
font-size: 20pt;
position: relative;
display: block;
}
.d1, .d2, .d3, .d4{
background-color: yellow;
width: 210px;
}

</style>
<script>

$(document).ready(function() {
var state = 0;
var selected = 0;
console.log(state);
$(".d1, .d2").mouseenter(function(){
state++;
selected = 1;
console.log(state);
$(this).animate({
width: '400px'
});
});

$(".d1, .d2").mouseleave(function(){
state++;
console.log(state);
if (state == 2 && selected == 1) {
$(".d1").animate({
width: '210px'
});
state = 0;
selected = 0;
}
});
});

</script>

</head>

<body>
<div class="fluid-container">
<div class="col-md-6 col-md-offset-3">
<h1>Animated Hover Slide</h1></br></br>
<ul>
<li><div class="d1">This is some text</div></li>
<li><div class="d2">This is some text</div></li>


</ul>




</div>
</div>
</body>


</html>

最佳答案

您还可以稍微简化一下,只需向悬停的 div 添加/删除一个事件类。

$(document).ready(function(){
$("ul li").hover(function(){
$("ul li").removeClass("active");
$(this).addClass("active");
});
});
li {
background-color: yellow;
padding: 10px;
margin:5px;
font-size: 18px;
position: relative;
display: block;
width: 210px;
transition: all 0.5s ease;
}

li.active {
width: 500px;
}
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>

<div class="fluid-container">
<div class="col-md-6 col-md-offset-3">
<h1>Animated Hover Slide</h1>
<br>
<br>
<ul>
<li>This is some text</li>
<li>This is some text</li>
</ul>
</div>
</div>

关于javascript - 使用 Jquery 仅在选中时为一个元素设置动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38317233/

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