javascript - 如何添加jquery弹跳动画

Question

在下面的代码中，我试图使页面的 li 元素弹跳。但是，当我运行代码时，什么也没有发生。我在做什么导致元素不反弹？我将不胜感激

$(document).ready(function () {
    $("ul.main_menu li").on("load", function (){
        $(this).show().animate({ marginTop: "80px" }, 1500 )
               .animate({ marginTop: "40px" }, 800 );
    });
});

/*less file*/
.main_menu {
    display: inline;
    li {
        float: left;
        list-style: none;
        margin-left: 32px;
        position: relative;
        padding-bottom: 5px;
        &:first-child {
            margin-left: 5px;
        }
    }
    a {
        text-decoration: none;
        color: @color_1;
        font-size: 14px;
        text-transform: uppercase;
        outline: none;
    }
    li.active {
        &:focus {
            border-bottom: 2px solid #C80813;
        }
        &:active {
            border-bottom: 2px solid #C80813;
        }
        border-bottom: 2px solid #C80813;
        &:hover {
            border-bottom: 2px solid #C80813;
        }
        &:after {
            content: '';
            position: absolute;
            top: 27px;
            right: 43%;
            border: 5px solid transparent;
            border-top-color: #C80813;
        }
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="main_menu">
  <li class="active"><a href="#home">Home</a></li>
  <li><a href="#about" data-id="#about">About us</a></li>
  <li><a href="#choose">Why choose us</a></li>
  <li><a href="#services">Services</a></li>
  <li><a href="#projects">Projects</a></li>
  <li><a href="#contact">Contact Us</a></li>
</ul>

Answer 1

试着去做

$('ul.main_menu li').show().animate({ marginTop: "80px" }, 1500 ).animate({ marginTop: "40px" }, 800 );

这将起作用，因为您已经有了一个 $(document).ready() 函数，所以它会在 li 组件 就绪 与浏览器交互

工作 JSFiddle例子

工作 JSFiddle用你的代码

$(document).ready(function () {
    $('ul.main_menu li').show().animate({ marginTop: "80px" }, 1500 ).animate({ marginTop: "40px" }, 800 );
});

**less file**
.main_menu {
    display: inline;
    li {
        float: left;
        list-style: none;
        margin-left: 32px;
        position: relative;
        padding-bottom: 5px;
        &:first-child {
            margin-left: 5px;
        }
    }
    a {
        text-decoration: none;
        color: @color_1;
        font-size: 14px;
        text-transform: uppercase;
        outline: none;
    }
    li.active {
        &:focus {
            border-bottom: 2px solid #C80813;
        }
        &:active {
            border-bottom: 2px solid #C80813;
        }
        border-bottom: 2px solid #C80813;
        &:hover {
            border-bottom: 2px solid #C80813;
        }
        &:after {
            content: '';
            position: absolute;
            top: 27px;
            right: 43%;
            border: 5px solid transparent;
            border-top-color: #C80813;
        }
    }
}

<script type = "text/javascript" 
 src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<ul class="main_menu">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#about" data-id="#about">About us</a></li>
    <li><a href="#choose">Why choose us</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#projects">Projects</a></li>
    <li><a href="#contact">Contact Us</a></li>
</ul>