jQuery Animation Not-Actioning

jQuery Animation Not-Actioning

本文关键字：Not-Actioning Animation jQuery      更新时间：2023-09-26

我正在编写一个小的jQuery函数，当单击div时，它将从菜单上的左侧效果中对滑入和淡入进行动画处理。我已经包含了jQuery库的脚本，JSlint没有出现任何语法错误。任何帮助将不胜感激！

笔记：我的菜单从屏幕外开始，左边距：-100%和不透明度：0，然后使用边距：0和不透明度：1在屏幕上动画化。我使用可见的伪类来跟踪菜单是否已动画化到屏幕上。

.HTML： 

<div id="menu-button" class="pull-left">
    <p>&#8594; Menu &#8592;</p>
</div>
<ul id="blockmenu">
    <li class="menuitem">
        <a href="#">
            <p>Menu item 1</p>
        </a>
    </li>
</ul>

j查询：

$(function() {
    $('#menu-button').click(function() {
        if ($('#blockmenu').hasClass('visible')) {
            $('#blockmenu').animate({
                margin: '0 0 0 -100%',
                opacity: '0'
            });
            $('#blockmenu').removeClass('visible');
        }
        else {
           $('#blockmenu').animate({
                margin: '0',
                opacity: '1'
            });
            $('#blockmenu').addClass('visible');
        }
    });
})

CSS的良好措施：

#blockmenu {
    background-color: rgba(225,225,225,0.1);
    bottom: 0;
    box-sizing: border-box;
    list-style: none;
    padding: 3em 4em 3em 4em;
    margin: 0 0 0 -100%;
    opacity: 0;
    position: absolute;
    z-index: 999999;
}

问候

芬兰人

如果在代码中包含 jQuery 库，它将按预期工作。

工作代码片段： 

$(function() {
    $('#menu-button').click(function() {
        if ($('#blockmenu').hasClass('visible')) {
            $('#blockmenu').animate({
                margin: '0 0 0 -100%',
                opacity: '0'
            });
            $('#blockmenu').removeClass('visible');
        }
        else {
           $('#blockmenu').animate({
                margin: '0',
                opacity: '1'
            });
            $('#blockmenu').addClass('visible');
        }
    });
});
#blockmenu {
    background-color: rgba(225,225,225,0.1);
    bottom: 0;
    box-sizing: border-box;
    list-style: none;
    padding: 3em 4em 3em 4em;
    margin: 0 0 0 -100%;
    opacity: 0;
    position: absolute;
    z-index: 999999;
}
<!-- INCLUDE JQUERY LIBRARY! -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu-button" class="pull-left">
    <p>&#8594; Menu &#8592;</p>
</div>
<ul id="blockmenu">
    <li class="menuitem">
        <a href="#">
            <p>Menu item 1</p>
        </a>
    </li>
</ul>

了解更多信息

相关文章：