jQuery Slide Left Анимация

Question

У меня есть четыре div или td, и то, что я пытаюсь сделать, это если я нажму на какой-либо, то все они будут скользить влево, остальные три должны исчезнуть, а тот, который я нажал должен оставаться.

Я также хочу аккуратный эффект анимации.

Я попытался это, но он дает некоторые ошибки стиля:

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

Я также попытался:

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

Это не работает.

Что я делаю неправильно?

Answer 1

Дайте это попробовать, может начать вас: http://jsfiddle.net/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");  
});​ 

Answer 2

Вы можете попробовать:

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

});

вы должны убедиться, что у вас есть в вашем КАС, possition установить в качестве относительной xControl{position: relative;}

Answer 3

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

Это более или меньше, как я это сделаю. Вы можете делать любые анимации, которые вы хотите, помимо слайда и исчезать. Вы можете использовать встроенные функции jquery-ui, но мне нравится анимировать лично для более настраиваемых анимаций.

Вот моя скрипка, чтобы показать, что он выглядит как http://jsfiddle.net/AXkxQ/1/