嗨我想在我将鼠标悬停在某个div上时进行动画切换,目前它已启动但不会停止。有人可以查看我的代码并告诉我我做错了吗?
$(document).ready(function() {
function loopAnimate(x, y) {
$(x)
.animate({
top: "1px",
left: "1px",
height: "290px",
width: "290px"
}, y / 1.5)
.animate({
top: "-=104px",
left: "-=104px",
height: "500px",
width: "500px"
}, y, function() {
loopAnimate(x, y);
})
}
function loopStop(x) {
$(x).stop();
$(x)
.css({
top: "1px",
left: "1px",
height: "290px",
width: "290px"
});
}
$('#button').hover(function() {
loopAnimate('.circle1', 1600)
loopAnimate('.circle2', 1700)
loopAnimate('.circle3', 1800)
}, function() {
loopStop('.circle1')
loopStop('.circle2')
loopStop('.circle3')
})
$('.wrapper').css('top', $(window).height() / 2 - 150);
$('.wrapper').css('left', $(window).width() / 2 - 150);
})
body {
padding: 0;
margin: 0;
background: gray;
overflow: hidden;
}
.wrapper {
width: 0;
position: relative;
}
.circle1 {
z-index: -1000;
position: absolute;
top: 1px;
left: 1px;
height: 290px;
width: 290px;
background: transparent;
border: 4px #eee solid;
border-radius: 100000000px;
display: inline-block;
}
.circle2 {
z-index: -1000;
position: absolute;
top: 1px;
left: 1px;
height: 290px;
width: 290px;
background: transparent;
border: 4px #eee solid;
border-radius: 100000000px;
display: inline-block;
}
.circle3 {
z-index: -1000;
position: absolute;
top: 1px;
left: 1px;
height: 290px;
width: 290px;
background: transparent;
border: 4px #eee solid;
border-radius: 100000000px;
display: inline-block;
}
#button {
position: relative;
background: black;
border-radius: 1000px;
z-index: 10;
height: 300px;
width: 300px;
transition: 0.33s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='wrapper'>
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div id='button'></div>
</div>
我主要希望它顺利地突然停止。我真的希望有人可以帮助我。
编辑:解决了。也改变了loopStopfunction loopStop(x){ $(x).stop(true,false);
$(x)
.animate({
top: "1px",
left: "1px",
height: "290px",
width: "290px"
});
}
答案 0 :(得分:0)
试试这个:
$(document).ready(function() {
function loopAnimate(x, y) {
$(x)
.animate({
top: "1px",
left: "1px",
height: "290px",
width: "290px"
}, y / 1.5)
.animate({
top: "-=104px",
left: "-=104px",
height: "500px",
width: "500px"
}, y, function() {
loopAnimate(x, y);
})
}
function loopStop(x) {
x="."+x;
$(x).stop(true,false);
$(x).css({
top: "1px",
left: "1px",
height: "290px",
width: "290px"
});
}
$('#button').mouseenter(function() {
loopAnimate('.circle1', 1600)
loopAnimate('.circle2', 1700)
loopAnimate('.circle3', 1800)
});
$('#button').mouseleave(function() {
loopStop('circle1')
loopStop('circle2')
loopStop('circle3')
});
$('.wrapper').css('top', $(window).height() / 2 - 150);
$('.wrapper').css('left', $(window).width() / 2 - 150);
});
body {
padding: 0;
margin: 0;
background: gray;
overflow: hidden;
}
.wrapper {
width: 0;
position: relative;
}
.circle1 {
z-index: -1000;
position: absolute;
top: 1px;
left: 1px;
height: 290px;
width: 290px;
background: transparent;
border: 4px #eee solid;
border-radius: 100000000px;
display: inline-block;
}
.circle2 {
z-index: -1000;
position: absolute;
top: 1px;
left: 1px;
height: 290px;
width: 290px;
background: transparent;
border: 4px #eee solid;
border-radius: 100000000px;
display: inline-block;
}
.circle3 {
z-index: -1000;
position: absolute;
top: 1px;
left: 1px;
height: 290px;
width: 290px;
background: transparent;
border: 4px #eee solid;
border-radius: 100000000px;
display: inline-block;
}
#button {
position: relative;
background: black;
border-radius: 1000px;
z-index: 10;
height: 300px;
width: 300px;
transition: 0.33s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='wrapper'>
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div id='button'></div>
</div>
答案 1 :(得分:0)
你在内部调用loopAnimate(x, y);
作为回调,只需删除它
function loopAnimate(x, y) {
$(x)
.animate({
top: "1px",
left: "1px",
height: "290px",
width: "290px"
}, y / 1.5)
.animate({
top: "-=104px",
left: "-=104px",
height: "500px",
width: "500px"
}, y)
}