0

テキストの開始位置はビデオの下にあります。テキストを任意の場所にドラッグした後、テキストを開始位置とまったく同じ設定スポットに戻す必要があります。やってみたけど思い通りにいかない…

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

3 に答える 3

0

私は解決策を見つけましたが、それは簡単ですが、アニメーションの動きはありません。

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

字幕が動画の一番下に移動しないのは、一番上の位置が設定されているためです。これを機能させるには、それを削除する必要があります。だから私はトップ位置の設定をクリアし、それは動作します。

于 2013-04-25T17:42:52.373 に答える
-1

私は実際にリンクからの参照を使用して、少し変更します..

オリジナル：

$("#right").click(function(){ $(".block").animate({"left": "+=50px"}, "slow"); });

提供されたコード:

$("#returnPosition").click(function() { $("#subtitle").animate({left:'50',bottom:'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();
                              });

                        });
于 2013-04-23T20:02:50.460 に答える