我已经为移动设备创建了一个隐藏菜单,并在滚动时用汉堡菜单替换。最初我使用的是jQuery .fadein()
和.fadeOut()
。我希望它们同时滑入和滑出,所以我使用.animate()
并注意到它只在滚动停止时动画。滚动时有没有办法让它立即动画?
这里有fiddle问题
以下是代码:
<div>
<div class="fade">
menu
</div>
<button id="button" style="background: url(https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png) no-repeat center; background-size: 30px 30px;"></button>
body {
height: 5000px;
}
.fade {
right:0px;
top: 20px;
position: fixed;
height: 70px;
width: 50px;
background-color: #d15757;
color: #fff;
padding: 10px;
}
#button {
top: 20px;
right: -20px;
opacity:0;
position: fixed;
height: 30px;
width: 30px;
}
// detect size of window (i.e. detect mobile)
var mq = window.matchMedia('all and (max-width: 700px)');
// hide menu and display button on scroll
$(window).scroll(function() {
if(mq.matches) {
//width of browser is bigger than 700px
if ($(this).scrollTop()>100)
{
$('.fade').stop().animate({ // menu goes out
right: '-20px',
opacity: '0',
});
$('#button').stop().animate({ // button comes in
right: '30px',
opacity: '1',
});
}
else
{
$('.fade').stop().animate({ // menu comes in
right: '0px',
opacity: '1',
});
$('#button').stop().animate({ // button goes out
right: '-20px',
opacity: '0',
});
}
} else {
// the width of browser is less then 700px
}
});
$(document).ready(function(){
if(mq.matches) {
// the width of browser is more then 500px
$("#button").click(function(){
$(".fade").stop().animate({ // menu comes in
right: '0px',
opacity: '1',
});
$("#button").stop().animate({ // button goes out
right: '-20px',
opacity: '0',
});
});
} else {
// the width of browser is less then 500px
}
});
答案 0 :(得分:3)
您在每个滚动事件上都调用stop()
,因此动画将停止。
一个技巧是在菜单中添加一个类
// hide menu and display button on scroll
$(window).scroll(function() {
if(mq.matches) {
//width of browser is bigger than 700px
if ($(this).scrollTop()>100)
{
if(!$('.fade').is('.hidden')) {
$('.fade').stop().animate({ // menu goes out
right: '-20px',
opacity: '0',
}).addClass('hidden');
$('#button').stop().animate({ // button comes in
right: '30px',
opacity: '1',
});
}
}
else
{
if($('.fade').is('.hidden')) {
$('.fade').stop().animate({ // menu comes in
right: '0px',
opacity: '1',
}).removeClass('hidden');
$('#button').stop().animate({ // button goes out
right: '-20px',
opacity: '0',
});
}
}
} else {
// the width of browser is less then 700px
}
});
请参阅JSFiddle here