Анимация нескольких Divs On Window Resize

Question

Итак, я работаю на личном веб-сайте, и у меня возникают проблемы с позиционированием.

http://i.imgur.com/tFvvnFN.png

В идеале, это то, что я хотел бы сайт, чтобы выглядеть. Прямо сейчас, однако, всякий раз, когда окно изменяется, кнопки, выпадающие из основного центрального изображения, не останутся с ним. Моя идея исправить это будет заключаться в том, чтобы установить все, где это должно быть в окне 1000px, а затем включить функцию, которая запускается при загрузке, и всякий раз, когда она изменяется, что перемещает кнопки («измененный размер» - 1000) влево.

Если кто-нибудь может помочь заставить это работать, или указать, где эти коды будут ошибочными, я был бы невероятно благодарен.

Соответствие HTML;

<div class = "mobile"> 
    <div id= "titlehead"> 
     <img src = "./images/Tilehead.png" alt="headtitle"> 
    </div> 
    <div id= "illustrationb"> 
     <a href = "Illustrations.html"> 
      <img src = "./images/IllustrationBanner.png" 
      onmouseover="this.src='./images/Bannerc-1.png'" 
      onmouseout="this.src='./images/IllustrationBanner.png'"></a> 
    </div> 
    <div id= "aboutb"> 
     <a href = "Illustrations.html"> 
      <img src = "./images/Banner-4.png" 
      onmouseover="this.src='./images/Bannerc-4.png'" 
      onmouseout="this.src='./images/Banner-4.png'"></a> 
    </div> 
    <div id= "photob"> 
     <a href = "Illustrations.html"> 
      <img src = "./images/Banner-3.png" 
      onmouseover="this.src='./images/Bannerc-2.png'" 
      onmouseout="this.src='./images/Banner-3.png'"></a> 
    </div> 
    <div id= "infob"> 
     <a href = "Illustrations.html"> 
      <img src = "./images/Banner-2.png" 
      onmouseover="this.src='./images/Bannerc-3.png'" 
      onmouseout="this.src='./images/Banner-2.png'"></a> 
    </div> 
</div> 

JQuery;

$(document).ready(function){ 
    var $xMove = window.width - 1000 
    var $mobile = $('.mobile') 
    if(window.width > 1000){ 
     $($mobile).animate({ 
      left: "+=" + $xMove 
     }) 
    } 
} 
$(window).resize(function){ 
    var $xMove = window.width - 1000 
    var $mobile = $('.mobile') 

    if(window.width > 1000){ 
     $($mobile).animate({ 
      left: "+=" + $xMove 
     }) 
    } 
} 

Answer 1

$(document).ready(function(){ 
    $(window).on('resize', function(){ 
     var windowsize = $(window).width(); 
      if (windowsize > 1000) 
      { 
       //do this 
       //do that.. 
      } 
      else 
      { 
       //do this 
       //do that.. 
      } 
    }); 
}); 

Answer 2

Является ли изображение статического размера? Если это так, оберните его в div, установите положение относительно и абсолютно поместите кнопки.

Если вы создадите скрипт JS, я смогу показать вам пример.