Question

如果这个帖子的问题可能过于具体而无法帮助他人，我想为一个时间负责人道歉。

我真的在这里与我正在设计的网站挣扎。我同时使用几个jquery动画，有时动画有效，有时却没有。更具体一点：

1）动画应该隐藏和缩小单个类的所有成员的字体大小，除了单击的类的成员。隐藏功能一致地工作，但除了类中的第一个元素之外，所有元素都不会发生字体大小更改功能。

2）当单击“home”div（.yhs）时，字体应返回其原始大小。但是，即使在.animate（）中调用它也不会改变。

以下是测试网站的工作链接：

LINK TO WORKING EXAMPLE

就源代码而言，这里是HTML和JS：

我也欢迎您提出任何其他意见，我很抱歉发布这样一个具体问题，但如果我还没有花几天时间讨论这个问题，我就不会这样做。感谢。

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%'});
    });
}

Answer 1

使用.animate()（或通过Javascript / Jquery进行任何CSS修改）避免沼泽的最佳方法是放置计时器;以$('.yhs').animate({fontSize:'120px'});为例更改$('.yhs').animate({fontSize:'120px'}, 0);（每次都认为不起作用）。但最好的方法是将CSS类与.delay()，.addClass() / .removeClass()和.queue() / .dequeue()

结合使用

JQuery Animate遇到麻烦

1 个答案: