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

文本起始位置位于视频底部。将文本拖动到任意位置后，我希望文本返回到与设置点完全相同的起始位置。我试过了，但效果不好

$("#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>

---

尝试将left:50px放在css部分以及从javascript运行的css上。。您缺少度量单位。。在像素像素的像素中有，但我强烈建议使用“em”。

我实际上会使用链接中的引用，并对其进行一些修改

原件： $（“#右”）。单击（函数（）{ $（“.block”）.animate（{“left”：“+=50px”}，“slow”）； });

您提供的代码： $（“#返回位置”）。单击（函数（）{ $（“#副标题”）.animate（{左：'50'，下：'40px'）； });

我的贡献 我曾经 要转换您的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();
                              });

                        }); 

---

我找到了解决方案，它很简单，但没有动画运动

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

---

字幕不移到视频底部的原因是设置了顶部位置。它需要将其移除才能正常工作。因此，我清除了顶部位置设置，它就工作了。

您是否尝试过删除

px

--

底部：'40'

@MohammadAdil“px”或仅

值

在

内部和
对象（：）内部都有效
container有固定高度吗？@sroes我刚刚添加了container CSS，它只设置了相对位置。#video也有position:absolute吗？这意味着容器没有高度，这意味着你不能从底部定位，你只谈到了左位。这就是问题所在。它只向左移动，忽略了底部设置的位置，而不会移动到底部位置。此外，请参阅，您的代码似乎完全不同。。也许，如果你点击“示例”选项卡并查看那里的参考信息不会有什么坏处：）同样，它只会在左侧设置动画。我也想把它移到底部哦天哪。。。修正你的例子。它不在解析代码中。其他人把-1放在你的答案上，而不是我，因为我没有足够的声誉关于那件事。。。我在框的顶部进行了编辑，没有看到需要删除代码并将其粘贴回以格式化块。。你所寻找的是点击事件中的一个链接，这个假设正确吗？你是否试图实现如下目标？？？只是出于好奇，你知道；）我使用你的例子，结果仍然是一样的，只在左边设置动画。这里是我的网站字幕视频演示，
$("#returnPosition").click(function() {
    $("#subtitle").css({"left": "50", "bottom": "40px"});
    document.getElementById("subtitle").style.top="";
});