I have four div's or td's and what I am trying to do is if I click on any one, then all of them slide left, the remaining three should disappear, and the one I clicked should remain.

I also want a neat animation effect.

I have tried this but it gives some error for style:

//xControl is a link inside the td
$(xControl).parent().siblings().each(function fn() {
    setTimeout(function fn() {
        $(this).animate({ width: 'toggle' });
    }, 800);
});

I have also tried:

$(this).hide("slide", { direction: "right" }, 500);

This doesn't work either.

What am I doing wrong?

I have four div's or td's and what I am trying to do is if I click on any one, then all of them slide left, the remaining three should disappear, and the one I clicked should remain.

I also want a neat animation effect.

I have tried this but it gives some error for style:

//xControl is a link inside the td
$(xControl).parent().siblings().each(function fn() {
    setTimeout(function fn() {
        $(this).animate({ width: 'toggle' });
    }, 800);
});

I have also tried:

$(this).hide("slide", { direction: "right" }, 500);

This doesn't work either.

What am I doing wrong?

• javascript
• jquery

• Where is your HTML? How about a jsFiddle? What is the exact error message? – Sparky Commented Jun 12, 2012 at 16:58
• I am sorry! I'll put all that info.. I am actually trying to edit a purchased template.. so the styling is plicated – Arshya Commented Jun 13, 2012 at 8:04

3 Answers 3

$(xControl).on("click", function(){
    var thisDiv = $(this);
    var sibs = thisDiv.siblings();
    sibs.animate({'left':'-=150'},{queue:false,plete:function(){
            $(this).animate({'opacity':0});
        }
    });
    thisDiv.animate({'left':'-=150'},{queue:false});
});

This is more or less how I would do it. You can do whatever animations you want in there besides a slide and fade. You can use the jquery-ui built in functions, but I like animate personally for the more customizable animations.

Here's my fiddle to show what it looks like http://jsfiddle/AXkxQ/1/

Give this a try, might start you out: http://jsfiddle/M8scf/2/

.item
{ 
    width:50px; 
    height:50px;
    margin:0 5px 0 0;
    display:inline-block;
    position:relative;            
    background:lime;
    cursor:pointer;        
}

<div class="con">
    <div class="item">DIV 1</div>
    <div class="item">DIV 2</div>
    <div class="item">DIV 3</div>
    <div class="item">DIV 4</div>
</div>

$(".con .item").click(function() {
  $(this).siblings().hide("slow");    
});​

You can try with:

$(xControl).parent().siblings().each(function fn() {
setTimeout(function fn() {
    $(this).animate({ left: '-=500px' });
}, 800);

});

you have to make sure you have in your css the possition set as relative xControl{position: relative;}