gpt4 book ai didi

jquery - 如何在使用 jQuery 时控制动画速度

转载 作者:行者123 更新时间:2023-11-28 18:05:33 25 4
gpt4 key购买 nike

我想用 jQuery 和 html & css 创建一个侧边菜单。这是我的代码(我不知道为什么不在 JSFiddle 网站上运行这段代码,而是这段代码在我的电脑上运行!!!)。

任何方式。当菜单到达终点时,我想控制移动菜单的速度(例如,当我将鼠标悬停在我的代码侧菜单中的粉红色按钮上时,开始以 200 速度(快速)移动,当到达终点时速度慢(600-700)并且在最后的路上要慢。)

我很困惑,请指导我!!!

这是我的代码:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="menu.css" type="text/css" rel="stylesheet" media="screen"/>
<script type="text/javascript" src="../../../../wamp/www/myproject/Map/js/jquery.js"></script>
<script type="text/javascript" src="menu.js"></script>
</head>

<body>
<div class="container">
<div id="sidebar-toggle">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<div id="sidebar">
<div class="swipe-area" id="swipe-sidebar"></div>
</div>
</div>
</body>
</html>

side menu

最佳答案

http://jsfiddle.net/Fuwb4/2/

$('#sidebar-toggle').on('mouseenter', function(){
$('#sidebar').stop().animate({
left: '0px'
}, {
duration: 200,
step: function(currentLeft) {
if(currentLeft > '-200'){
$('#swipe-sidebar').css('display','block');
}
}
});
});
$('#sidebar').on('mouseleave', function(){
$('#sidebar').stop().animate({
left: '-270px'
}, {
duration: 200,
step: function(currentLeft) {
if(currentLeft < '-200'){
$('#swipe-sidebar').css('display','none');
}
}
});
});

关于jquery - 如何在使用 jQuery 时控制动画速度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19701522/

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