Как обновить текст до исходного исходного места?

Question

Начальная позиция текста находится внизу видео. После перетаскивания текста в любом месте, я хочу, чтобы текст возвращался в исходное положение точно так же, как и место установки. Я попытался это, но он не работает так, как я хочу,

$("#returnPosition").click(function() { 
    $("#subtitle").animate({left:'50',bottom:'40px'}); 
}); 

но мне кажется, что это сосредоточиться только на одушевленном налево 50, не включенное дне.

Здесь HTML5 код,

<div id="container" class="container"> 

       <video id="video" width="930" height="500" controls> 
        <source src="caption.mp4" type="video/mp4"> 
        <source src="caption.ogg" type="video/ogg" > 
        <source src="caption.webm" type="video/webm" > 
       </video> 
       <div id="subtitle" class="subtitle"> 
       </div> 
</div> 

и CSS для субтитров исходного положения,

.container { 
       position:relative; 
      } 
    .subtitle { 
        position:absolute; 
        width:840px; 

        bottom:40px; 
        left:50; 
        z-index:2000; 
        color:white; 

        font-weight:bold; 
        font-size:150%; 
        text-align:center; 
    } 

Answer 1

Я нашел решение, и это простое, но не движение одушевленного.

$("#returnPosition").click(function() { 
    $("#subtitle").css({"left": "50", "bottom": "40px"}); 
    document.getElementById("subtitle").style.top=""; 
}); 

Причина, по которой субтитры не перемещаются в нижней части видео, обусловлено тем, что верхнее положение установлено. Его нужно удалить, чтобы выполнить эту работу. Поэтому я очищаю настройку верхней позиции, и она работает.

Answer 2

Попробуйте положить слева: 50px на Css части и так же на CSS, что вы работаете из javascript .. Вам не хватает единицы измерения, которая у вас есть в пикселях с пикселя, но я бы настоятельно предложил использовать вместо них «em».

Answer 3

Я бы на самом деле использовать ссылку из ссылки и изменить его немного ..

оригинал:..

$ ("# правый") нажмите (функция() {$ (»блок ") .animate ({" left ":" + = 50px "}," slow "); });

ваш предоставляется код:

$ ("# returnPosition") нажмите (функция() { $ ("# подзаголовок") анимировать ({слева.. '50', снизу: '40px'}); });

моего вклад

Я использовал http://pxtoem.com/ конвертировать 50px, .. это говорит 1em, то думает, что это понятнее

     jQuery(function($) 
         { 

        // We clear the event here, the click then we pass it as an argument.. event.. it's the click or the event that triggers the function is the same..  
       // identify the object for easier readyness, because that will allow you to reuse it for a class in the event that you want to extend something later, instead of an id.. this is only in the case that you want to have many divs in the future and it's a normal coding convention, I believe with jQuery.  

         $("a#returnPosition").off('click').on('click', function(event) 
         { 

         // modified this 
         var the_div=$("div#subtitle"); 
         the_div.animate({"left": "+=1em"}, 1820); 
         the_div.animate({"bottom": "+=1em"}, 1820); 

         // Keep this in case of the need to return false... event.preventDefault(); 
           }); 

         });