3

オブジェクトをドラッグした後、1 回のスムーズな移動で開始位置 (下/左) に戻すアニメーションを作成したいと考えています。ただし、すべてが上/左の開始位置でうまく機能しているようです。私が理解している限りでは、上限値が設定されていない限り、animate 関数は移動を計算できないためです。

私は例を作りました：

$("#move").click(function(){
    $(".block").animate({"bottom": "9px", "left": "9px"}, "slow");
});

http://jsfiddle.net/Tancrede/dztFw/3/

それほど複雑ではないはずですが、残念ながら私の javascript/jquery スキルは非常に限られています。

同様の質問がされており、私の状況はより単純であるという印象がありますが、スクリプトをどのように適応させるかはまだわかりません。 ドラッグ可能なオブジェクトを開始位置にアニメーション化する

誰かが私を助ける時間があれば、それは素晴らしいことです!

4

1 に答える 1

2

私はこれに対する解決策を思いつきました。これは少しハックに見えるかもしれませんが、ドラッグ可能なtop要素が要素に設定されており、下部に配置できないため、現時点では他の方法は考えられません要素の高さが固定されていない限り、トップもある場合。あなたの場合はそうです。

$( "#draggable" ).draggable({ containment: "window" });

$("#move").click(function(){
    var el = $('.block'); // Save the element
    el.animate({
       top: getHeight(el, 9), // Calculate the height with our function
       left: "9px"
    }, "slow");
});

var getHeight = function( elem, extra) {
    return $(window).height() - elem.height() - (extra || 0);
    // here we just calculate the height of the window minus the height of 
    // the element minus the extra 9px that you had by default, and we get a 
    // bottom:9px; effect.
};

私の例では、省略して代わりにbottom使用します。ウィンドウのtopを計算し、必要な余分なものを取り除きます。heightheightelement

デモ

より良い方法を考えることができれば、回答に追加します。

注 -うまくいかない理由は、既に があり、 to をtopアニメートできないため、またはto に直接ジャンプするためです。topautoinheritbottom

于 2013-07-28T22:31:44.673 に答える