Question

我正在尝试制作一个具有移动显示的菜单。

似乎有很多方法，但我找不到符合这些要求的解决方案：

可以做一个＆＃34; Easing＆＃34;
点击左侧然后向右滑动

现在我有了这个和切换工作：

$(document).ready(function(){
    $("#menu").click(function(){
        $("#nav1").toggle("slide");
    });
});

Answer 1

如果通过“移动显示”表示重复动画， this 是一种非常脏的方法，无需使用外部插件即可实现。此外，它不会立即启动动画。

$('button').on('click', function(){
    setInterval(function(){
        $('.box').delay(2000).animate({"margin-left": "100px"})
                 .delay(2000).animate({"margin-left": "20px"});
    }, 1000);
});

Answer 2

您可以使用JQuery的toggleClass功能。

JavaScript的：

    $(document).ready(function () {
$('.slideout-menu-toggle').on('click', function(event){
event.preventDefault();
// create menu variables
var slideoutMenu = $('.slideout-menu');
var slideoutMenuWidth = $('.slideout-menu').width();
// toggle open class
slideoutMenu.toggleClass("open");
// slide menu
if (slideoutMenu.hasClass("open")) {
slideoutMenu.animate({
left: "0px"
}); 
} else {
slideoutMenu.animate({
left: -slideoutMenuWidth
}, 250);    
}
});
});

的CSS：

.slideout-menu {
position: fixed;
top: 0;
left: -250px;
width: 250px;
height: 100%;
background: #333;
z-index: 100;
}
.slideout-menu h3 {
position: relative;
padding: 12px 10px;
color: #fff;
font-size: 1.2em;
font-weight: 400;
border-bottom: 4px solid #222;
}
.slideout-menu .slideout-menu-toggle {
position: absolute;
top: 12px;
right: 10px;
display: inline-block;
padding: 6px 9px 5px;
font-family: Arial, sans-serif;
font-weight: bold;
line-height: 1;
background: #222;
color: #999;
text-decoration: none;
vertical-align: top;
}
.slideout-menu .slideout-menu-toggle:hover {
color: #fff;
}
.slideout-menu ul {
list-style: none;
font-weight: 300;
border-top: 1px solid #151515;
border-bottom: 1px solid #454545;
}
.slideout-menu ul li {
border-top: 1px solid #454545;
border-bottom: 1px solid #151515;
}
.slideout-menu ul li a {
position: relative;
display: block;
padding: 10px;
color: #999;
text-decoration: none;
}
.slideout-menu ul li a:hover {
background: #000;
color: #fff;
}
.slideout-menu ul li a i {
position: absolute;
top: 15px;
right: 10px;
opacity: .5;
}

HTML：

<div class="slideout-menu">
<h3>Menu <a href="#" class="slideout-menu-toggle">×</a></h3>
<ul>
<li><a href="#">Item <i class="fa fa-angle-right"></i></a></li>
<li><a href="#">Item <i class="fa fa-angle-right"></i></a></li>
<li><a href="#">Item <i class="fa fa-angle-right"></i></a></li>
<li><a href="#">Item <i class="fa fa-angle-right"></i></a></li>
<li><a href="#">Item <i class="fa fa-angle-right"></i></a></li>
</ul>
</div>
<button class="slideout-menu-toggle">Toggle</button>

jsFiddle.net

Answer 3

感谢您的帮助和时间！

这是我最终如何做到的：

（文档）$。就绪（功能（） { $（“＃menu”）。点击（功能（） { $（“＃nav1”）。animate （ { width：“toggle”， }， { 持续时间：1200， specialEasing：{width：“easeInOutCubic”，}，完成：function（） { / $（this）.after（“动画完成。”）; / } } ）; } ）; } ）;

带有幻灯片和缓动的jQuery切换菜单

3 个答案: