1

CSSトランジションとjQueryでbottom位置を変換する方法を知っている人はいますか?top

画像のアンカーを変更する必要があります。そして、私はこの問題を抱えています。と の間に競合がbottomありtopます。

編集:私のシナリオでは、画像の幅は画面の 100% です。ウィンドウのサイズが変更されると、画像の新しい位置を取得するJSのコードがあります。たとえば、アンカーが常に「上」にある場合、状況によっては、この穴が数ミリ秒間表示されることがあります。この時点で上ではなく下に設定すると、問題が解決します。しかし、アニメーションにはこの「ジャンプ」があります。

私の問題を理解するために、このフィドルを作成しました。

私の英語でごめんなさい！誰かがこれについて考えていますか？ありがとうございました ！

4

2 に答える 2

1

次のように、クラスを使用してインライン スタイルを削除することで、ジャンプを回避できます。

if ( image.hasClass("bottom") ) {
    image.css("bottom", "").animate( { top: "0" } , 1000, function(){
        image.removeClass("bottom");
    });
} else {
    image.css("top", "").animate( { bottom: "0" } , 1000, function(){
        image.addClass("bottom");
    });
}

cssクラスを追加します

.bottom {
    bottom: 0;
}

http://jsfiddle.net/rZPq3/に従って

クロスブラウザ用に編集:

    var top = image.position().top + 'px';
    var bottom = image.parent().height() - image.height() + 'px';

    if (image.hasClass("bottom")) {
        image.finish().css({ "bottom": "", "top": top }).animate({ top: "0px" }
            , 500, function () { image.removeClass("bottom"); });
    } else {
        image.finish().css({ "top": "","bottom": bottom }).animate({bottom:"0px"}
            , 500, function () { image.addClass("bottom"); });
    }

http://jsfiddle.net/wCuuX/

于 2013-07-07T23:07:57.060 に答える
0

競合を避けるために、いずれかのプロパティを使用する必要があります。フィドルを使用topのみに変更し、代わりにクラスを使用して値を切り替えました。

var toggle = $("button#toggle");
var image = $("div img");
toggle.click(function () {
    image.toggleClass("toggled");
});

jsFiddle の更新されたテスト ケースを参照してください。

于 2013-07-07T21:59:07.400 に答える