I'm fairly new to jQuery UI and I'm trying to do a simple animation. When the animation is triggered, I want a button to slide out and push any content next to it over to fill in the space.

Using the slide animation, I've managed to get the button to slide out, but the content pops into the new position rather than being pushed over by the sliding button. As an added problem, the button seems to pop into it's full size after finishing the slide animation.

Q: How do I show an slide an object out while sliding over content that current occupies that space?

JSFiddle /

Current Code

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

I'm fairly new to jQuery UI and I'm trying to do a simple animation. When the animation is triggered, I want a button to slide out and push any content next to it over to fill in the space.

Using the slide animation, I've managed to get the button to slide out, but the content pops into the new position rather than being pushed over by the sliding button. As an added problem, the button seems to pop into it's full size after finishing the slide animation.

Q: How do I show an slide an object out while sliding over content that current occupies that space?

JSFiddle http://jsfiddle/Dragonseer/z8mAY/

Current Code

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

• javascript
• jquery
• jquery-ui

4 Answers 4

Here's my take on your issue, but it uses CSS for animation instead of jQuery, which works better in modern browsers and mobile/tablets, but not so much for older versions of IE: http://jsfiddle/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');
});

I've kept it as close to the original as I could, but in production, I would likely use relative/absolute positioning for the button, keep it a fixed width, and slide it in. Also, you'll need to use all the browser prefixes for the CSS you want to support, I only included the ones necessary to work in firefox.

Here's my take on your fiddle:

http://jsfiddle/Jrv7m/

I used a jquery toggle helper, otherwise it's just standard 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(); });
    }
);

If you should need it to work in older versions of IE you could use .animate() to slide the delete button in and out of a div with the overflow hidden.

Working Example

Script

$(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>

Tested and working in IE 7, 8, and 9

Here's a possible solution to the sliding of the buttons. This still has some odd issues with the button resize, but maybe it's a step in the right direction for you.

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

It uses a max-height on the container to ensure the button can't be seen until it's ing into view or already sliding out.

I'm sure there are many ways to improve on this...