How to animate an element being clipped in multiple directions

Question

I'm trying to take the jQuery UI blind effect, and make it work up and down simultaneously.

I tried using dequeue to chain them together, but to no avail:

Fiddle Attempt

Something like:

$(this).effect( "blind", {direction: "up"} ).dequeue()
        .effect( "blind", {direction: "down"});

Or:

$('div').on('click', function(){
    $(this).effect( "blind", {direction: "up", queue: false} ).effect( "blind", {direction: "down", queue: false});
})

---

Edit 2

Thanks everyone who answered... Probably due to my ambiguous description, people thought I was looking for blind up and blind down, but I was looking for what @vinod created - where it blinds together in the middle (simultaneous blind up/down - ie, vertical).

---

Edit 3

To see a living example:

http://soulmastery.com/#/News

Then click on 'inspiration' at the bottom.

This is a flash site, but I want that 'collapse' effect the happens to the content.

---

Edit 4 (Included alternative answer)

@Irvin Zhan's answer based on the clip CSS prop got me thinking about just animating the clip property directly.

Using the plugin found here: http://zduck.com/2013/jquery-css-clip-animation-plugin/, I was able to achieve the effect:

http://jsfiddle.net/PKyKn/3/

Essentially, you set the clip property to start (it has to be set initially, a nice improvement to the plugin would be to default to the element's dimensions and go from there), and then animate the property as you'd expect:

$(this).animate({
    clip: 'rect(5px 0px 50px 0px)'
}, 500);

Answer 1

Due to a bit of confusion with the interpretation of the problem, here are three answers for three separate problems, the last one being the correct one.

Method One

Here, the guitar is rolled up to the top and then subsequently pulled back down, like blinds on a window. The third argument for effect() and other functions such as toggle() is a callback.

$('div').on('click', function(){
    $(this).toggle( "blind", {direction: "up"}, function(){
        $(this).toggle( "blind", {direction: "up"});
    });
})

Direction "up" is default, so this might be even simpler:

$('div').on('click', function(){
    $(this).toggle( "blind", function(){
        $(this).toggle("blind");
    });
})

First JSFiddle Here

Method Two

Here, we squeeze the image until it disappears. We use JQuery UI's clip along with some CSS changes:

JQuery

$('div').on('click', function(){
    $(this).hide('clip', {direction: 'vertical'}, 1000);
});

CSS

div {
    position: relative;
}
div img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
}

By adding this css, the image height will always expand to the div's edges. Adding the JQuery UI clip to the div, the img overflow will therefore not be chopped off and be instead resized in the correct way.

Second JSFiddle Here

Method Three

I think this is the intended effect you would like. The image remains fixed while the top and bottom are clipped, just like having JQuery blind being simultaneously executed as specified by the prompt. We may implement this using clip + CSS3.

JQuery

$('img').on('click', function(){
    $(this).css('clip', "rect(50px 75px 50px 0)");
})

CSS

div {
    position: relative;
}
div img {
    position: absolute;
    height: 100px;
    width: 75px;
    clip: rect(0 75px 100px 0);
    -webkit-transition: clip 2s;
    transition: clip 2s;
}

Note that the CSS clip must be used on an absolutely positioned element. We start with a rectangle that contains the entire image. We then clip it so that the rectangle has zero height. We smooth out this process by using CSS3 transitions.

Third JSFiddle Here

Answer 2

Try this:

$('div').on('click', function () {
    $(this).hide('clip', {direction: 'vertical'}, 1000);
})

Fiddle Demo

Answer 3

Try to use callback here:

$('div').on('click', function(){
    $(this).effect( "blind", {direction: "up"}, function() {
        $(this).effect( "blind", {direction: "down"});
    });
});

Updated Fiddle

Answer 4

You can use following

$('div').on('click', function(){
    $(this).effect( "blind", {direction: "up"} );
    $(this).effect( "blind", {direction: "down"});
})

fiddle=> http://jsfiddle.net/TjjhD/4/