1

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

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

问：如何在滑过当前占用该空间的内容时显示滑出对象？

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

当前代码

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

4 回答 4

5

这是我对您的问题的看法，但它使用 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 中工作所必需的那些。

于 2013-11-01T20:42:58.123 回答
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 回答
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 回答
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 回答