如何添加jquery动画 [英] How to add jquery animation

问题描述

Jquery动画不适用于以下代码

Jquery animation is not working for following code

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

.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;
        }
    }
}

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

我的尝试：



我刚做了一个动画但是没有工作

What I have tried:

I just did a animation but is not working

推荐答案

（ document ）。ready（ function （）{

(document).ready(function () {

（ ul.main_menu li）。on（ load， function （）{

("ul.main_menu li").on("load", function (){

（ this ）。show（）。animate（{marginTop： 80px}， 1500 ）
.animate（{marginTop： 40px }， 800 ）;
}）;

}）;

(this).show().animate({ marginTop: "80px" }, 1500 ) .animate({ marginTop: "40px" }, 800 ); }); });

我尝试了什么：



我刚做了一个动画但是没有工作

What I have tried:

I just did a animation but is not working

这篇关于如何添加jquery动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！