Question

我是jQuery UI的新手，我正在尝试做一个简单的动画。当动画被触发时，我想要一个按钮滑出并推动它旁边的任何内容以填充空间。

使用幻灯片动画，我设法让按钮滑出，但内容弹出到新位置而不是被滑动按钮推过。另外一个问题是，完成幻灯片动画后，按钮似乎会弹出它的全尺寸。

问：在当前占据该空间的内容上滑动时，如何向对象显示幻灯片？

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

当前代码

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

Answer 1

这是我对你的问题的看法，但是它使用CSS代替jQuery，它在现代浏览器和移动设备/平板电脑中运行得更好，但对于旧版本的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中工作所需的那些。

Answer 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(); });
    }
);

Answer 3

如果您需要它在旧版本的IE中工作，您可以使用.animate()将删除按钮滑入和滑出div，并隐藏溢出。

<强> Working Example

脚本

$(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中进行测试和工作

Answer 4

这是滑动按钮的可能解决方案。按钮调整大小时仍有一些奇怪的问题，但也许这对你来说是正确的方向。

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

它使用容器上的最大高度来确保按钮在进入视图或已经滑出之前无法看到。

我确信有很多方法可以改善这个......

jQuery UI - 滑出并推送相邻内容

4 个答案: