如何添加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>

- Prasath V

---

如果我的答案对您有用，您是否考虑接受它。如果不行，请留下评论，我会编辑它以使其有效。 - Dan

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>

- Dan

---

@Prasath1992 没问题 :) - Dan

Answer 2

加载事件不能附加到 ul 或 li 元素，只能附加到文档或外部资源。如果您想在页面加载时实现弹跳动画，则下面的代码片段可以帮助您。

$(document).ready(function () {
    $(".main_menu li").effect( "bounce", { distance: 120 }, "slow" );
});

**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>

<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>

<script type = "text/javascript" 
 src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.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>

- Deep

---

抱歉，它对你没有起作用。你能告诉我出了什么问题吗？ - Deep

抱歉，你的也可以工作，兄弟...部分地...那显示了确切的结果。 - Prasath V