原：

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

尝试把左边：50px放在css部分以及你从javascript运行的css上..你错过了测量单位..你在px中有像素，但我强烈建议你请改用“em”。

Answer 2

我找到了解决方案而且很简单，但没有动画动作。

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

字幕未移动到视频底部的原因是因为设置了最高位置。它需要删除它才能使其工作。所以我清除顶部位置设置并且它有效。

Answer 3

我实际上会使用链接中的引用并稍微修改一下..

原：

$（ “＃右”）。单击（函数（）{ $（“。block”）。animate（{“left”：“+ = 50px”}，“slow”）; }）;

您提供的代码：

$（“＃returnPosition”）。click（function（）{ $（ “＃副标题”）动画（{左： '50'，底部： '40像素'}）。 }）;

我的贡献

我使用了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();
                              });

                        });

如何将文本动画回原始的起始div位置？

3 个答案:

原：

您提供的代码：

我的贡献