Javascript 图像弄乱了jQuery函数

我目前正在制作一个网站，所有其他jquery功能都可以使用。然而，当我在html中添加图片时，它会把函数搞得一团糟，使它们变得杂乱无章。下面是html、css和js的片段

html:

js:

如果您删除

alt class=“abs jasonbain”

，则它可以正常工作。即使包含无效的

alt

也可以正常工作。您在图像上添加的类会破坏效果。你自己在小提琴上试试看

<section id="landing-page">
    <div class="center">
        <div id="image-background"></div>
        <div class="center-image">
            <img src="http://lorempixel.com/400/200/"/>
        </div>
    </div>
</section>

---

函数最初应该做什么？不是有效的HTML。删除单词alt或使用alt=“something”嘿，在用我的原始照片试过之后，我发现图像本身就是问题所在。由于某种原因，它使功能不响应。对于这个障碍有什么补救办法吗？或者我应该尝试不同的图像？

#landing-page {
position: relative;
overflow: hidden;
background-color: #088da5;
height: 1280px;
width: 100%;
position: fixed;
    top: 700px;
}
.center-image {
position: relative;
top: -415px;
left: 275px;
height: 500px;
width: 800px;
}
.jasonbain {
height: 500px;
width: 800px;
position: relative;
top: -415px;
left: 275px;
height: 500px;
width: 800px;
}
#image-background {
height: 500px;
width: 500px;
background-color: white;
-moz-border-radius: 500px;
-webkit-border-radius: 500px;
border-radius: 500px;
position: relative;
top: 700px;
left: 425px;
box-shadow: 10px 10px 10px #003366;
}

var main=function() {
    $("#landing-page").delay(5500).animate({"top": "0px"},200);
    $("#image-background").delay(5500).animate({"top": "70px"},100).animate({"top": "85px"},250).animate({"top": "80px"},300);
    $(".center-image").hide().delay(5700).fadeIn("slow");
}
$(document).ready(main);

<section id="landing-page">
    <div class="center">
        <div id="image-background"></div>
        <div class="center-image">
            <img src="http://lorempixel.com/400/200/"/>
        </div>
    </div>
</section>

var main=function() {
    $("#landing-page").delay(5500).animate({"top": "0px"},200);
    $("#image-background").delay(5500).animate({"top": "70px"},100).animate({"top": "85px"},250).animate({"top": "80px"},300);
    $(".center-image").hide().delay(5700).fadeIn("slow");
}
main();