如何在jQuery中缩小和恢复divs

我正在网站上工作以帮助一个亲戚，但对网络开发是新手，几乎没有经验。现在，当您向下滚动时，我有一些我想操纵的div，并在您滚动时取消更改。我面临的问题是，在滚动条越过特定点之后，Divs更改(收缩/幻灯片/等(正确，但是如果您回到顶部，则不会发生任何事情，因此动画只能运行一次。"临时"是唯一给我带来问题的事件，而其余事件则完美无缺。这是我的HTML代码的副本：

<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Sarah's Portfolio</title>
        <link rel="stylesheet" type="text/css" href="main.css">
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="navigationbar.js"></script>
    </head>
    <body>
        <div id="image">
            <img src="Project Images\Sarah.png" id="Sarah">            
        </div>
        <div id="name">
            <h1>Sarah James</h1>
            <h2 id="objective">OBJECTIVE</h2>
        </div>
        <table id="navbar" cellspacing=0>
            <tr>
                <td><u><i><a href="index.html">Home</a></u><i></td>
                <td><a href="resume.html">Resume</a></td>
                <td><a href="portfolio.html">Portfolio</a></td>
                <td><a href="contact.html">Contact Me</a></td>
            </tr>
        </table>
        <div id="topbar"></div>
        <div id="rotatingblock" align="middle">
            <img width=90% height=50% class="mySlides" src="Project Images\AsburyPoolComplex\page-4-1.jpg">
            <img width=90% height=50% class="mySlides" src="Project Images\AsburyPoolComplex\page-5-1.jpg">
            <img width=90% height=50% class="mySlides" src="Project Images\AsburyPoolComplex\page-6-1.jpg">
        <script src="rotationblock.js"></script>
        </div>
    </body>
</html>

和我的jQuery代码：

$(document).ready(function(){
    $(window).scroll(function () {
        var $scroll=$(window).scrollTop();
        if ($scroll>60){
            console.log ("bigger than 40 and is " + $scroll);
            $("#name").animate({top:"2%",height:"13%",left:"35%"},500);
            $("#image").animate({width:"8%",left:"5%",top:"3%"},500);
            $("#navbar").animate({top:"-17%"},500);
            $("#topbar").animate({height:"25%"},500);
            $("#objective").html("<h2></h2>");
            $("td").animate({height:"20%"},500);
            $("a").css("font-size","150%");
        }
        else{
            console.log ("smaller than 40 and is " + $scroll);
            $("#name").animate({height:"21.5%",left:"40%"},500);
            $("#image").animate({width:"15%",left:"0%",top:"2%"},500);
            $("#navbar").animate({top:"1.3%"},500);
            $("#topbar").animate({height:"43%"},500);
            $("#objective").html("OBJECTIVE");
            $("td").animate({height:"20%"},500);
            $("a").css("font-size","175%");
        }
    })
})

如果要坚持现在使用的方法，请尝试使用有关您要定位的选项的明确声明在动画函数末尾的数字，以便您可以添加更多选项并执行：

{ duration: whateverMilisecs, queue: false }

$("td").animate({height:"20%"},{ duration: 500, queue: false });

但是，使用CSS过渡可能会更容易。

将.anim类添加到您想要使用以下选项动画的任何对象中：

.anim{
  -webkit-transition: all 1s; // Chrome
  -moz-transition: all 1s; // Mozilla
  -o-transition: all 1s; // Opera
  transition: all 1s;
}

，此类是您要动画的选项：

.doThingy{
  transform: translate( 0px, -500px); 
}

然后在您的if语句中进行：

if(etcetc)
  $(target).addClass('doThingy');
} else {        
  $(target).removeClass('doThingy);
}

基本上，您使用CSS告诉浏览器该元素将动画。然后，您在必要时添加和删除类，这将触发动画。

相关内容

最新更新

热门标签：