Geek Answers Handbook

Show / hide div with slide left \ right animation

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.

+4
source share
2 answers

While not the sharpest animation, I let it behave the way I think, you need to find a parent and hide all the brothers and sisters. I'm still not sure why this moves elements to the left, while a direct call to .siblings() does not look.

Seen here .

As already mentioned, using classes to identify a group of elements is the right approach, not an identifier.

Update

While I'm still not sure why the siblings () cannot find the siblings in the div you found by ID, I suspect that he has to do something with the show / hide process, or perhaps even with a sliding one 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

great update to @ jesus.tesh solution

Update

A behavior update to a solution from @erwinjulius. I changed the position of the DIVs so that it behaves better, allowing the user to quickly click links without breaking the animation. A white background and left filling are added only for a better view of the effect.

+15
source

However, these codes work, the name tag in the elements is deprecated to W3C standards

I tried with the ID does not work, then I changed the name tag to the title, and it works too, and you follow the W3C standards!

So, change the “name” to “title”, like this, it works fine, see here: http://design65grafischontwerp.nl/#portfolio

$ (Document) .ready (function () {

  $('a').click(function () { var divtitle= this.title; $("#"+divtitle).show("slow").siblings().hide(1000); });

});

+1
source

More articles:


All Articles