如何为在多个方向上剪辑的元素设置动画

Question

我正在尝试采用 jQuery UI 的盲目效果，并使其同时上下工作。

我尝试使用 dequeue 将它们链接在一起，但无济于事：

Fiddle Attempt

类似：

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

或者：

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

---

编辑 2

感谢所有回答的人...可能由于我的模棱两可的描述，人们认为我在寻找盲上和盲下，但我在寻找@vinod 创建的内容 - 它在中间一起盲（同时盲/down - 即垂直）。

---

编辑 3

看一个活生生的例子：

http://soulmastery.com/#/News

然后点击底部的“灵感”。

这是一个 Flash 网站，但我希望内容发生“折叠”效果。

---

编辑 4（包括替代答案）

@Irvin Zhan 基于 clip CSS 属性的回答让我想到了直接为 clip 属性设置动画。

使用这里找到的插件：http://zduck.com/2013/jquery-css-clip-animation-plugin/，我能够达到效果：

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

本质上，您将 clip 属性设置为 start（它必须在初始时设置，对插件的一个很好的改进是默认为元素的尺寸并从那里开始），然后按照您的期望为属性设置动画：

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

Answer 1

由于对问题的解释有点混乱，这里是三个不同问题的三个答案，最后一个是正确的。

方法一

在这里，吉他被卷到顶部，然后又被拉下来，就像窗户上的百叶窗一样。 effect() 和 toggle() 等其他函数的第三个参数是回调。

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

“向上”方向是默认的，所以这可能更简单：

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

First JSFiddle Here

方法二

在这里，我们挤压图像直到它消失。我们使用 JQuery UI 的剪辑以及一些 CSS 更改：

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%;
}

通过添加此 css，图像高度将始终扩展到 div 的边缘。将 JQuery UI 剪辑添加到 div 中，img 溢出将因此不会被截断，而是以正确的方式调整大小。

Second JSFiddle Here

方法三

我认为这是您想要的预期效果。图像在顶部和底部被剪裁时保持固定，就像按照提示指定同时执行 JQuery 盲注一样。我们可以使用 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;
}

请注意，CSS clip 必须用于绝对定位的元素。我们从一个包含整个图像的矩形开始。然后我们剪裁它，使矩形的高度为零。我们使用 CSS3 过渡来平滑这个过程。

Third JSFiddle Here

Answer 2

试试这个：

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

Fiddle Demo

Answer 3

尝试在这里使用callback：

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

Updated Fiddle

Answer 4

您可以使用以下

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

小提琴=> http://jsfiddle.net/TjjhD/4/