Изображение messes up Функция jQuery

Question

В настоящее время я создаю веб-сайт, и все остальные функции jquery работают. Однако, когда я добавляю картинку в свой html, она испортит функции и делает их порывистыми. Вот фрагменты html, css и js.

HTML:

<section id="landing-page"> 
    <div class="center"> 
     <div id="image-background"></div> 
     <div class="center-image"> 
      <img src="img/jasonbain-01.png"alt class="abs jasonbain"> 
     </div> 
    </div> 
</section> 

CSS:

#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); 

Answer 1

Он отлично работает на fiddle если вы удалите свой 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> 

JS

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();