平滑Javascript动画？_Javascript_Html_Css_Animation

平滑Javascript动画？

javascript html css animation

平滑Javascript动画？,javascript,html,css,animation,Javascript,Html,Css,Animation,我有一个Javascript动画： <!DOCTYPE html> <html> <head> <title>Fun with animations</title> <link rel="stylesheet" href="animation.css"/> </head> <body> <div id="header"> <h1 id="x">Hi<

我有一个Javascript动画：

<!DOCTYPE html>
<html>
<head>
<title>Fun with animations</title>
<link rel="stylesheet" href="animation.css"/>
</head>
<body>
    <div id="header">
        <h1 id="x">Hi</h1>
        <h1>Hey</h1>
    </div>

    <script type="text/javascript">
    var header = document.getElementById("header");
    var hHeight = header.style.marginTop | -100;

    header.onclick = move;

    function move() {
        if (hHeight < 0) {
            hHeight += 10;
            header.style.marginTop = hHeight + "px";
            setTimeout(move, 20);
        }

        else if (hHeight >= 0) {
            hHeight -= 10;
            header.style.marginTop = hHeight + "px";
            setTimeout(move, 20);
        }
    }
    </script>
</body>
</html>


动画的乐趣
你好
嘿
var header=document.getElementById（“header”）；
var hhheight=header.style.marginTop |-100；
header.onclick=移动；
函数move（）{
如果（hhheight<0）{
hh8+=10；
header.style.marginTop=hHeight+“px”；
设置超时（移动，20）；
}
如果（hhheight>=0），则为else{
hh8-=10；
header.style.marginTop=hHeight+“px”；
设置超时（移动，20）；
}
}

基本上，我有一个标题div。我希望标题在单击时向下和向上滑动。它可以很好地向下滑动，但是当它到达末端时，它开始发出毛刺，直到你再次点击它，这通常会阻止它。然后，当你再次点击它，把它带回来，它真的开始出故障，而且永远不会上升或停止

如何制作一个相对无故障的脚本来制作好的动画？

类似这样的东西

var header=document.getElementById（“header”）；
var hhheight=header.style.marginTop |-100；
header.onclick=移动；
无功定时器；
函数move（）{
如果（hh0）{
hh8-=10；
header.style.marginTop=hHeight+“px”；
定时器=设置超时（向上移动，20）；
}否则{
计时器=设置超时（移动，20）；}
}

#标题{背景色：红色；}

停止
你好
嘿

您的代码有一个bug。动画的平滑部分完成后，代码将继续运行。hhheight每20毫秒在0和-10之间无休止地切换

您的代码将HHHeight从-10更改为0：

if (hHeight < 0) {
        hHeight += 10;
        ...

正如乔治所说，无论HHHHT的状况如何，你都会再次调用move。有很多方法可以解决这个问题，这里有一个：

var header=document.getElementById（“header”）；
var hhheight=header.style.marginTop |-100；
header.onclick=移动；
var方向=假；
函数moveUp（）{
如果（高高>-100）{
hh8-=10；
header.style.marginTop=hHeight+“px”；
设置超时（向上移动，20）；
}
}
函数moveDown（）{
如果（hhheight<0）{
hh8+=10；
header.style.marginTop=hHeight+“px”；
设置超时（向下移动，20）；
}
}
函数move（）{
如果（指示）{
设置超时（向上移动，20）；
}否则{
设置超时（向下移动，20）；
}
方向=！方向；
}

#标题{
利润上限：-100px；
}


你好
嘿

是否需要手动滚动您自己的动画？你看过jQuery和jQuery UI提供的动画了吗（取决于你需要什么）？是的，我看过。除了我只是想自己学习如何做之外，还有一些奇怪的技术问题阻止我使用jQuery。没有人知道它们是什么，但由于某种原因，我的两台计算机都无法成功访问jQuery库。它也不是我的网络-我在多个网络上尝试过。你不能下载它而不是通过网络访问它吗？@Tommay你希望你的头什么时候停止？无论您的

if（）

语句的结果如何，如果您再次启动该函数，它为什么会停止。此外，jQuery只是一个JavaScript文件。你可以在本地托管并引用它。我也可以下载它。但正如我所说，我想学习Javascript本身及其工作原理。

else if (hHeight >= 0) {
        hHeight -= 10;
        ...