Функция анимации не работает

Question

Я пытаюсь сделать две кнопки, которые скользят при нажатии и выталкивают другую кнопку из окна просмотра. Например:

Перед нажатием - [синий | серый]

Нажмите синий - [все синий]

Получить его? У меня html и css настроены отлично (я думаю), но я просто не могу получить этот код jQuery для анимации и изменения позиционирования элемента, содержащего две кнопки. Это сводит меня с ума. То, что у меня есть до сих пор:

<div id='container'> 
    <div id='wrapper'> 
     <a id='wrapper_photo' href=""></a> 
     <a id='wrapper_video' href=""></a> 
    </div> 
</div> 
<style> 
    #container{ 
     width:760px; 
     height:25px; 
     background:#000000; 
     overflow:hidden; 
    } 

    #wrapper { 
     width:1520px; 
     height:25px; 
     background-color:#0F0; 
     position:relative; 
     left:-380px; 
    } 

    #wrapper_photo{ 
     width:760px; 
     height:25px; 
     background-color:#666666; 
     float:left; 
    } 

    #wrapper_video { 
     width:760px; 
     height:25px; 
     background-color:#0000CC; 
     float:left; 
    } 
</style> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#wrapper_photo').click(function() { 
      $('#wrapper').animate({ 
       left:"-=380"}, 
      5000); 
     }); 
    }); 
</script> 

Я остановился, когда не смог заставить левую сторону работать.

Answer 1

здесь вы идете: DEMO

$(function(){ 
    $('#wrapper_photo, #wrapper_video').click(function() { 
     $(this).animate({ 
      width:"100%"}, 
      5000); 
     $(this).siblings('a').animate({ 
      width:'0px' 
     },5000); 
    }); 
}); 

Answer 2

Я не уверен, если будет установлено это новое значение для левой стороны, так что вы можете использовать position()function, чтобы получить значение left из #wrapper контейнера, а затем рассчитать новое значение.

$(document).ready(function() { 
    $('#wrapper_photo').click(function() { 
     var leftVal = $('#wrapper').position().left - 380; 
     $('#wrapper').animate({ 
      left:leftVal}, 
      5000); 
    }); 
});