JQuery 动画的问题答案

【问题标题】：Trouble with JQuery AnimateJQuery 动画的问题
【发布时间】：2015-08-28 02:24:08
【问题描述】：

如果这个帖子问题可能过于具体而无法帮助他人，我想提前道歉。

我真的在为我正在设计的网站而苦苦挣扎。我同时使用几个 jquery 动画，有时动画有效，有时无效。具体来说：

1) 动画应该隐藏和缩小单个类的所有成员的字体大小，除了被点击的类的成员。隐藏功能始终如一，但字体大小更改功能不会对除类中的第一个元素之外的所有元素进行。

2) 当点击“home” div (.yhs) 时，字体应该恢复到原来的大小。但是，即使在 .animate() 中调用它，它也不会改变。

这里是测试网站的工作链接：

LINK TO WORKING EXAMPLE

至于源代码，这里是 HTML 和 JS：

我也欢迎您可能拥有的任何其他额外的 cmets，对于发布这样一个具体问题，我再次感到抱歉，但如果我没有在这个问题上花费几天时间，我就不会这样做。谢谢。

HTML：

<html>
    <head>
        <title>Yonkers Historical Society</title>
        <script src="java-resources/jquery-1.11.3.min.js"></script>
        <link rel="stylesheet" type="text/css" href="styles/header.css">
        <script src="java-resources/jquery.animate-colors-min.js"></script>
        <script src="java-resources/jquery.transit.min.js"></script>
        <script src="java-resources/typed.min.js"></script>
        <script src="java-resources/header-setup.js"></script>
    </head>
    <body>
        <div class = "main">
            <div class = "title yhs one" id = "nav"></div>
            <div class = "title regular two" id = "nav"></div>
            <div class = "title regular three" id = "nav"></div>
            <div class = "title yhs four" id = "nav"></div>
            <div class = "title regular five" id = "nav"></div>
            <div class = "title yhs six" id = "nav"></div>
            <div class = "title regular seven" id = "nav"></div>
            <div class = "title regular eight" id = "nav"></div>
            <div class = "title regular grey nine" id = "nav"></div>
            <div class = "small ten"></div>
        </div>
        <div class = "text information"></div>
    </body>
</html>

JS：（为简洁起见，我没有包括打字算法）

function hoverFunction(){
    $('.regular').hover(function(){$(this).stop(true).animate({color:'#6666FF'});},
                     function(){$(this).stop(true).animate({color:'black'});});
    $('.yhs').hover(function(){$('.yhs').stop(true).animate({color:'black'});},
                     function(){$('.yhs').stop(true).animate({color:'navy'});});
    $('.regular').click(function(){pageRedirectAnimation($('.regular').index(this));});

}
function pageRedirectAnimation(index){
    $('.title.regular').not(':eq('+index+')').css("display","none");
    $('.small').hide();
    $('.yhs').animate({fontSize:'30px'}, 100);
    $('.regular:eq('+index+')').animate({fontSize:'30px'}, 100);
    $('.main').animate({height:'10%'}, 500);
    setClickHome();
}
function setClickHome(){
    $('.yhs').click(function(){
        $('.yhs').animate({fontSize:'120px'});
        $('.regular').css("display", "block").animate({fontSize: '120px'}, 100);
        $('.small').show();
        $('.main').animate({height:'100%'});
    });
}

【问题讨论】：

你试过用 CSS 做这个吗？似乎会更容易。
感谢您的建议。我完全没有想到这一点。我刚刚在 css 中添加了一个过渡，并在 jquery 中使用 .css() 启动它。
我可能会更进一步，只使用 JavaScript 来交换容器上的类。然后声明性地为每个状态的每个子元素定义样式。
@nicholas 是的，听从了您的建议，完美运行！谢谢

标签： javascript jquery html animation

【解决方案1】：

避免使用.animate()（或通过 Javascript/Jquery 进行的任何 CSS 修改）的最佳方法是设置一个计时器；例如，更改$('.yhs').animate({fontSize:'120px'});by $('.yhs').animate({fontSize:'120px'}, 0);（并非每次都有效）。但最好的方法是使用 CSS 类结合 .delay()、.addClass()/.removeClass() 和 .queue()/.dequeue()

【讨论】：

完美运行，彻底解决了问题！