1

私はjQuery UIにかなり慣れていないので、簡単なアニメーションを作ろうとしています. アニメーションがトリガーされたら、ボタンをスライドさせて、その横にあるコンテンツを押してスペースを埋めるようにします。

スライド アニメーションを使用して、ボタンをスライドさせることができましたが、コンテンツはスライド ボタンによって押されるのではなく、新しい位置に飛び出します。追加の問題として、スライド アニメーションが終了した後、ボタンがフル サイズで表示されるように見えます。

Q: 現在そのスペースを占有しているコンテンツをスライドさせながら、オブジェクトをスライドアウトさせるにはどうすればよいですか?

JSFiddle http://jsfiddle.net/Dragonseer/z8mAY/

現在のコード

$("#deleteButton").hide();
$("#editButton").click(function()
{
    $("#deleteButton").toggle("slide", { direction: "right" }, 1500);                          
});
4

4 に答える 4

5

これがあなたの問題に対する私の見解ですが、jQueryの代わりにアニメーションにCSSを使用しています。これは、最新のブラウザやモバイル/タブレットではうまく機能しますが、古いバージョンのIEではあまり機能しません: http://jsfiddle.net/z8mAY/21/

CSS:

div {
    display: flex;
}

article {
    width:100%;
    margin: 5px;
    transition: all 1s;
}

div button {
    -moz-box-sizing: border-box;
    width: 0;
    transition: all 1s;
    float:right;
    overflow:hidden;
    opacity:0;
}

.expanded article {
    width: calc(70% - 5px);

}
.expanded button {
    width: 30%;
    opacity:1;
}

JS:

$("#editButton").click(function()
{
    $('div').toggleClass('expanded');
});

できる限りオリジナルに近づけましたが、本番環境では、ボタンに相対/絶対配置を使用し、固定幅を維持してスライドインする可能性があります。また、すべてを使用する必要がありますサポートしたい CSS のブラウザー プレフィックス。Firefox で動作するために必要なものだけを含めました。

于 2013-11-01T20:42:58.123 に答える
2

古いバージョンの IE で動作させる必要がある場合は、.animate()を使用して、オーバーフローを非表示にして、削除ボタンを div の内外にスライドさせることができます。

実施例

脚本

$(function () {
    $("#editButton").click(function () {
        if ($("#deleteButton").offset().left > $('.new').offset().left + $('.new').width()) { // if the button is outside of the div
            $('p').animate({ // animate the width of the text to 70%
                width: '70%'
            }, 1500);
            $("#deleteButton").animate({ // and animate the delete button into the div
                right: '0%'
            }, 1500);
        } else { // if the button is inside the div 
            $('p').animate({ //animate the width of the text to 100%
                width: '100%'
            }, 1500);
            $("#deleteButton").animate({ //move the delete button back out of the div
                right: '-32%'
            }, 1500);

        }
    });
});

CSS

#deleteButton {
    position:absolute;
    top:0;
    right:-32%;
    width:30%;
    height: 120px;
}
.new {
    width:100%;
    position:relative;
    overflow:hidden;
    padding-bottom: 6%;
}

HTML

<button id="editButton">Toggle Edit Mode</button>
<div class="new">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pulvinar aliquet ante, eu malesuada eros ornare a. Sed eleifend sit amet quam eget vehicula. Fusce viverra bibendum auctor. Quisque sed diam adipiscing, fringilla tortor quis, ullamcorper magna. Integer vel dapibus turpis, sed ullamcorper mauris.</p>
    <button id="deleteButton">Delete</button>
</div>

IE 7、8、および 9 でテストおよび動作

于 2013-11-02T16:07:30.803 に答える
2

これがあなたのフィドルに対する私の見解です：

http://jsfiddle.net/Jrv7m/

jquery トグル ヘルパーを使用しました。それ以外の場合は、標準の jQuery です。

$("#editButton").toggleClick(
    function() {
        $("article").animate({ width: '70%' }, animateOpts);
        $("#deleteButton").show().animate({ right: 0, opacity: 1 }, { duration: 700, queue: false });             
    }, 
    function () {
        $("article").animate({ width: '100%' }, animateOpts);
        $("#deleteButton").animate({ right: '-100%', opacity: 0 }, { duration: 500, queue: false }, function () { $(this).hide(); });
    }
);
于 2013-11-01T20:27:13.050 に答える
1

ボタンのスライドに対する可能な解決策は次のとおりです。これにはまだボタンのサイズ変更に関するいくつかの奇妙な問題がありますが、おそらくあなたにとって正しい方向への一歩です.

$("#deleteButton").hide();
$("#editButton").click(function()
{
    if($(this).hasClass("shown")){
        $(this).removeClass("shown");
        $(".par").animate({
            width: "100%"
        }, 1000);
        $("#deleteButton").delay(0).toggle("slide", { direction: "right" }, 800);
    }else{
        $(this).addClass("shown");
        $(".par").animate({
            width: "75%"
        }, 1000);
        $("#deleteButton").delay(1000).toggle("slide", { direction: "right" }, 1000);
    }

});

http://jsfiddle.net/5GuwY/46/

コンテナの最大高さを使用して、ボタンが表示されるか、スライドアウトするまでボタンが表示されないようにします。

これを改善する方法はたくさんあると思います...

于 2013-11-01T20:13:49.763 に答える