Слайд плавающие divs после сокрытия элемента

У меня есть строка из 4 divs, которые перемещаются слева. При щелчке, div исчезает, и его братья и сестры перемещаются влево и занимают свое положение. Тем не менее, я борюсь со сглаживанием этой анимации, так как остальная «дива» просто перейти в новое положение, а не скользить поСлайд плавающие divs после сокрытия элемента

http://jsfiddle.net/G9x8V/

Есть ли способ, чтобы сгладить переход, предпочтительно без использования конкретных значений , то есть: margin-left: x pixels;? Кроме того, можно ли это сделать с помощью css-переходов?

источник

2013-10-09 cat-t

http://www.w3schools.com/css3/css3_animations.жерех Я собираюсь попробовать его на jsfiddle сейчас, но я предполагаю, что это что-то вроде: @keyframes myfirst { 0% {маржа налево: 30px;} 25% {маржа налево: 20;} 50% {margin-left: 10;} 100% {margin-left: 0;} } Я никогда раньше не встречался с анимацией css, хотя я почти уверен, что это возможно. (Однако он не будет работать в старых версиях IE.) –

Вы можете переключаться fadeOut() с hide()

Вот дополненная fiddle

$(function(){ 
    $('.box').on('click', function(){ 
     $(this).hide(1000); 

    }) 
});

EDIT

Одним из направлений является обернуть коробки в невидимые дивы, которые будут прятаться за ящиками исчезать. Вот обновленный fidle

HTML

<div class="container"> 
<div class="outer-box"> 
    <div class="box">1</div> 
</div> 
<div class="outer-box"> 
    <div class="box">2</div> 
</div> 
<div class="outer-box"> 
    <div class="box">3</div> 
</div> 
<div class="outer-box"> 
    <div class="box">4</div> 
</div> 
</div>

CSS

.container { 
width: 600px; 
} 
.box { 
width: 100%; 
height: 120px; 
background: red; 
float: left; 
} 

.outer-box { 
width: 20%; 
height: 120px; 
margin-left: 2.5%; 
float: left; 
}

JQuery

$(function(){ 
    $('.box').on('click', function(){ 
     $(this).fadeOut(1000, function(){ 
      $(this).parents('.outer-box').hide(1000); 
     }); 

    }); 
});

источник

2013-10-09 19:31:39

Да, это то, что я изначально имел, но я пытался разбить его на два события; исчезают из div, а затем раздвигаются оставшиеся div. –

@ cat-t проверить редактирование ответа. дайте мне знать, если это сработает для вас –

Это идеальное решение, спасибо Bojana! –

Это что ты ищешь? Или вы действительно хотите, чтобы блоки скользят вдоль?

CSS3 Удобство

-webkit-transition: all 3s ease-in-out; 
-moz-transition: all 3s ease-in-out; 
-ms-transition: all 3s ease-in-out; 
-o-transition: all 3s ease-in-out;

JSFIDDLE

JQuery

$(function(){ 
    $('.box').on('click', function(){ 
     $(this).fadeOut(function() { 
      $(this).next().animate({'left': '0px'}, 1000).next().animate({'left': '27.5%'}, 1000).next().animate({'left': '50%'}, 1000); 
     }); 
    }) 
});

JSFIDDLE jQuery

источник

2013-10-09 19:32:48

Я ищу все блоки, чтобы скользить вдоль, так что если первый div нажат и исчезнет, остальные 3 ползунка влево. –

Хорошо, я буду работать над этим кодом больше, когда вернусь домой, но я думаю, что смогу достичь желаемой цели! См. Http://jsfiddle.net/Josh_Powell/G9x8V/9/ –

Я бы с Бояна» s ответ, но я дам вам еще один вариант, как я работал немного на нем (это не сделано, реализация не так просто, как Бояна в):

http://jsfiddle.net/G9x8V/4/

@-webkit-keyframes myfirst /* Safari and Chrome */ 
{ 
0% {margin-left: 18%;} 
25% {margin-left: 12%;} 
50% {margin-left: 6%;} 
100% {margin-left: 0%;} 
}

И тогда вы d необходимо обновить javascript, чтобы он произошел при щелчке, а не на загрузке страницы, и вы можете захотеть добавить больше очков в эту анимацию и переключиться на px.

источник

2013-10-09 19:42:19

Слайд плавающие divs после сокрытия элемента

ответ

Смежные вопросы