显示/隐藏带有左右滑动动画的div [英] show/hide div with slide left\right animation

问题描述

我在这里尝试过: http://jsfiddle.net/92HXT/1/但它不起作用. 仅在使用show("slow")/hide("slow")时有效.

谢谢.

解决方案

虽然不是最清晰的动画，但我通过找到父级并隐藏所有同级来使它表现出您认为想要的方式.我还不确定为什么这会将元素向左滑动，而直接调用.siblings()似乎没有.

在此处看到.

正如其他人提到的那样，使用类来标识一组项目是正确的方法，而不是通过ID.

更新:

虽然我仍然不确定为什么siblings()找不到您通过ID找到的div的兄弟姐妹，但我怀疑它必须在显示/隐藏甚至可能使用的过程中做些什么滑动动画.这是我建议的jQuery/jQueryUI:

$('a.view-list-item').click(function () {
    var divname= this.name;
    $("#"+divname).show("slide", { direction: "left" }, 1000);
    $("#"+divname).parent().siblings(":visible").hide("slide", { direction: "left" }, 1000);
});

这是更新的版本.

更新:

@ jesus.tesh对解决方案的优秀更新

更新:

通过@erwinjulius对解决方案进行行为更新. 我更改了DIV的位置，使其表现更好，允许用户快速单击链接而不会破坏动画. 添加了白色背景和左填充以更好地呈现效果.

I tried this here: http://jsfiddle.net/92HXT/1/ but it does not work. It only works if I use show("slow")/hide("slow").

Thanks.

解决方案

While not the sharpest animation, I have enabled it to behave the way I think you're wanting by finding the parent and hiding all the siblings. I'm not sure yet why this slides the elements out to the left whereas a direct call to .siblings() doesn't seem to.

Seen here.

As others have mentioned, using classes to identify a group of items is the correct approach instead of by ID.

Update:

While I'm still not sure why siblings() doesn't find the siblings to the div you've found by ID, I'm suspecting it has to do something with the process of showing / hiding or possibly even using the sliding animation. Here is my suggested jQuery/jQueryUI:

$('a.view-list-item').click(function () {
    var divname= this.name;
    $("#"+divname).show("slide", { direction: "left" }, 1000);
    $("#"+divname).parent().siblings(":visible").hide("slide", { direction: "left" }, 1000);
});

Here is the updated version.

Update:

An excellent update to the solution by @jesus.tesh

Update:

A behavior update to the solution by @erwinjulius. I changed DIVs positioning so it behaves better, allowing user to click on links quickly without breaking the animation. Added white background and left-padding just for better effect presentation.

这篇关于显示/隐藏带有左右滑动动画的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！