Div 出现在其正常位置 "during the time they are displaying" 下方并具有动画效果？

Question

在下面的 SSCCE 中，在单击 .next-arrow 和 .previous-arrow 时，我隐藏并显示了几个 .item 元素，一次四个（其中四个可见一次出现在屏幕上）。

我想为它们的显示和隐藏设置动画，以便在屏幕上创建看似条带状的项目的滑动效果。那就是我想创建一个水平滑动效果。

我找到了一堆选项，但我想使用 animate({"width":"toggle"})，因为它是最简单的。它几乎也符合我的目的。

唯一的问题是，在滑动过程中，新的items流入显示在下方水平方向space 其中包含所有 item。 然后，一旦它们完全可见，并且前一组完全不可见，它们就会出现在正确的位置。

我需要它们在 .wrapper 包围的水平 row/space 范围内显示，在出现的过程中也是如此。

为什么会发生这种情况，我该如何解决？

$(document).ready(function() {
 //alert('ready');//check
 
 var numberOfItems = $('.item').length;
 //alert('numberOfItems => ' + numberOfItems);//check
 
 displayNextArrowOnCondition();
 displayPreviousArrowOnCondition();
 
 
 
 /**
 *
 **
 $('a.next-arrow').click(function(event) {
  event.preventDefault();
  
   var currentFirstItem = getCurrentFirstItem(); // Difference between var and no var SO: If you're in the global scope then there's no difference. If you're in a function then var will create a local variable, "no var" will look up the scope chain until it finds the variable or hits the global scope (at which point it will create it):
  
  $('div.item'+currentFirstItem).hide(); //We don't need to have the condition of checking this element's existence because the next-arrow whose handler this method is, appears only if the numberOfItems is greater than the id of the item with the greatest id among the elements currently visible on the screen.
  if ( ('div.item'+(currentFirstItem+1)).length ) { //SO: How can I check the existence of an element in jQuery?? In JavaScript, everything is truthy or falsy and for numbers, 0 means false, everything else true. So you could write: "if ($(selector).length)" - and you don't need that > 0 part.
   $('div.item'+(currentFirstItem+1)).hide();
  }
  if ( ('div.item'+(currentFirstItem+2)).length ) { 
   $('div.item'+(currentFirstItem+2)).hide();
  }
  if ( ('div.item'+(currentFirstItem+3)).length ) { 
   $('div.item'+(currentFirstItem+3)).hide();
  }
  
  hidePreviousArrow();
  hideNextArrow();
  
  displayPreviousArrowOnCondition();
  displayNextArrowOnCondition();
 }); */
 /**
 *
 **/
 $('a.next-arrow').click(function(event) {
  event.preventDefault();
  
   var currentFirstItem = getCurrentFirstItem(); // Difference between var and no var SO: If you're in the global scope then there's no difference. If you're in a function then var will create a local variable, "no var" will look up the scope chain until it finds the variable or hits the global scope (at which point it will create it):
  
  $('div.item'+currentFirstItem).animate({"width": "toggle"}, 350); //We don't need to have the condition of checking this element's existence because the next-arrow whose handler this method is, appears only if the numberOfItems is greater than the id of the item with the greatest id among the elements currently visible on the screen.
  if ( ('div.item'+(currentFirstItem+1)).length ) { //SO: How can I check the existence of an element in jQuery?? In JavaScript, everything is truthy or falsy and for numbers, 0 means false, everything else true. So you could write: "if ($(selector).length)" - and you don't need that > 0 part.
   $('div.item'+(currentFirstItem+1)).animate({"width": "toggle"}, 350);
  }
  if ( ('div.item'+(currentFirstItem+2)).length ) { 
   $('div.item'+(currentFirstItem+2)).animate({"width": "toggle"}, 350);
  }
  if ( ('div.item'+(currentFirstItem+3)).length ) { 
   $('div.item'+(currentFirstItem+3)).animate({"width": "toggle"}, 350);
  }
  
  hidePreviousArrow();
  hideNextArrow();
  
  displayPreviousArrowOnCondition();
  displayNextArrowOnCondition();
 }); 
 
 
 /**
 *
 **
 $('a.previous-arrow').click(function(event) {
  event.preventDefault();
  
   var currentFirstItem = getCurrentFirstItem(); 
  
  $('div.item'+(currentFirstItem-1)).show('slow'); 
  
  if ( ('div.item'+(currentFirstItem-2)).length ) {
   $('div.item'+(currentFirstItem-2)).show('slow');
  }
  if ( ('div.item'+(currentFirstItem-3)).length ) { 
   $('div.item'+(currentFirstItem-3)).show('slow');
  }
  if ( ('div.item'+(currentFirstItem-4)).length ) { 
   $('div.item'+(currentFirstItem-4)).show('slow');
  }
  
  hidePreviousArrow();
  hideNextArrow();
  
  displayPreviousArrowOnCondition();
  displayNextArrowOnCondition();
 });*/
 /**
 *
 **/
 $('a.previous-arrow').click(function(event) {
  event.preventDefault();
  
   var currentFirstItem = getCurrentFirstItem(); 
  
  $('div.item'+(currentFirstItem-1)).animate({"width": "toggle"}, 350);
  
  if ( ('div.item'+(currentFirstItem-2)).length ) {
   $('div.item'+(currentFirstItem-2)).animate({"width": "toggle"}, 350);
  }
  if ( ('div.item'+(currentFirstItem-3)).length ) { 
   $('div.item'+(currentFirstItem-3)).animate({"width": "toggle"}, 350);
  }
  if ( ('div.item'+(currentFirstItem-4)).length ) { 
   $('div.item'+(currentFirstItem-4)).animate({"width": "toggle"}, 350);
  }
  
  hidePreviousArrow();
  hideNextArrow();
  
  displayPreviousArrowOnCondition();
  displayNextArrowOnCondition();
 });
 
 
 /**
 * DISPLAY NEXT ARROW WHEN
 * 1. NUMBER OF ITEMS IS GREATER THAN THE id OF THE LAST ITEM DISPLAYED IN THE CURRENT VIEWPORT
 **/
 function displayNextArrowOnCondition() {
  //alert('displayNextArrowOnCondition called');//check
  //Iterate through items in OPPOSTIE order, and when found the first one which is not hidden by hide() or display:none, assign it to currentLastItem (because this is the first item in the viewport), and break out from the loop.
  var currentLastItem = getCurrentLastItem();
  //alert('currentLastItem -> ' + currentLastItem);//check
  if (currentLastItem < numberOfItems) {
   $('a.next-arrow').css('display', 'block');
   $('.wrapper').mouseover(function() {
    //$('a.next-arrow').css('visibility', 'visible');
   });
   $('.wrapper').mouseleave(function() {
    //$('a.next-arrow').css('visibility', 'hidden');
   });
  }
 }
 
 
 /**
 * DISPLAY PREVIOUS ARROW WHEN
 * 1. THE id OF THE FIRST DISPLAYED ITEM IS GREATER THAN 4
 **/
 function displayPreviousArrowOnCondition() {
  //Iterate through items in order, and when found the first one which is not hidden by hide() or display:none, assign it to currentFirstItem (because this is the first item in the viewport), and break out from the loop.
  var currentFirstItem = getCurrentFirstItem();
  if (  currentFirstItem > 4  ) {
   $('a.previous-arrow').css('display', 'block');
   $('.wrapper').mouseover(function() {
    $('a.previous-arrow').css('visibility', 'visible');
   });
   $('.wrapper').mouseleave(function() {
    $('a.previous-arrow').css('visibility', 'hidden');
   });
  }
 }
 
 
 /**
 * DISPLAY:NONE NEXT ARROW IF IT IS VISIBLE
 **/
 function hideNextArrow() {
  //alert('hideNextArrow called');//check
  if ($('a.next-arrow').css('display').toLowerCase() == 'block') { //The == operator will compare for equality after doing any necessary type conversions. The === operator will not do the conversion, so if two values are not the same type === will simply return false.| Just in case anyone was wondering in 2012: === is way faster than ==. jsperf.com/comparison-of-comparisons.
   //alert('YES if ($(\'a.next-arrow\').attr(\'display\').toLowerCase() == \'block\'). SO I AM CHANGING IT TO none.');//check
   $('a.next-arrow').css('display', 'none');
  }  //else { alert('NO  if ($(\'a.next-arrow\').attr(\'display\').toLowerCase() == \'block\').'); } //check
 }
 
 
 /**
 * DISPLAY:NONE PREVIOUS ARROW IF IT IS VISIBLE
 **/
 function hidePreviousArrow() {
  //alert('hidePreviousArrow called');//check
  //alert($('a.previous-arrow').css('display'));//check
  if ($('a.previous-arrow').css('display') == 'block') {
   //alert('YES if ($(\'a.previous-arrow\').attr(\'display\').toLowerCase() == \'block\'). SO I AM CHANGING IT TO none.');//check
   $('a.previous-arrow').css('display', 'none');
  } //else { alert('NO  if ($(\'a.previous-arrow\').attr(\'display\').toLowerCase() == \'block\').'); } //check
 }
 
 
 /**
 *
 **/
 function getCurrentFirstItem() {
  for (i=1; i<=numberOfItems; i++) {
   if (  $("#"+i).visible(true, true)  ) {
    //alert('YES if (  $("#"+i).visible(true, true)  )');//check
    currentFirstItem = i;
    break;
   } //else { //alert('NO if (  $("#"+i).visible(true, true)  )'); }//check 
  }
  //alert('currentFirstItem -> ' + currentFirstItem);//check
  return currentFirstItem;
 }
 
 
 /**
 *
 **/
 function getCurrentLastItem() {
  for (j=numberOfItems; j>=1; j--) {
   if (  $("#"+j).visible(true, true) )  {
    //alert("YES if (  $(\"#\"+j).visible(true, true) ) ");//check
    currentLastItem = j;
    break;
   } //else { //alert('NO if (  $("#"+j).visible(true, true) )'); } //check
  }
  //alert('currentLastItem -> ' + currentLastItem);//check
  return currentLastItem;
 }
 
});

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video, details, summary {
    margin: 0px;
    padding: 0px;
    border: 0px none;
    background: transparent none repeat scroll 0% 0%;
    font-size: 100%;
    vertical-align: baseline;
}

.wrapper {
 position:relative;
 white-space:nowrap;
 overflow:hidden;
}

div.item {
 /*position:absolute;*/
 display:inline-block;
 width:25%;
 height:25vw;
}


.item1 {
 left:0%;
 background-color:wheat;
}.item2 {
 left:25%;
 background-color:pink;
}.item3 {
 left:50%;
 background-color:beige;
}.item4 {
 left:75%;
 background-color:gainsboro;
}.item5 {
 left:100%;
 background-color:coral;
}.item6 {
 left:125%;
 background-color:crimson;
} .item7 {
 left:150%;
 background-color:aquamarine;
} .item8 {
 left:175%;
 background-color:darkgoldenrod;
}.item9 {
 left:200%;
 background-color:khaki;
}.item10 {
 left:225%;
 background-color:indianred;
}.item11 {
 left:250%;
 background-color:mediumspringgreen;
} 



.previous-arrow, .next-arrow {
 width:30px;
 height:50%;
 top:50%;
 position:absolute;
 opacity:0.7;
 color:white;
 background-repeat:no-repeat;
 margin-top: -30px;
 
 display:none;
}

.previous-arrow {
 background-image:url(a2.png);
 left:0px;
}

.next-arrow {
 background-image:url(b2.png);
 right:0px;
}

.previous-arrow, .next-arrow {
 opacity:1;
}

body {
 background-color:black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.visible/1.1.0/jquery.visible.min.js"></script>


<div class="wrapper"><!--
  --><a class="previous-arrow" href="">&lt;</a>--><!--
  --><div id="1" class="item item1 wheat">a.</div><!--
  --><div id="2" class="item item2 pink">a.</div><!--
  --><div id="3" class="item item3 beige">a.</div><!--
  --><div id="4" class="item item4 gainsboro">a.</div><!--
  --><div id="5" class="item item5 coral">a.</div><!--
  --><div id="6" class="item item6 crimson">a.</div><!--
  --><div id="7" class="item item7 darkgoldenrod">a.</div><!--
  --><div id="8" class="item item8 aquamarine">a.</div><!--
  --><div id="9" class="item item9 aquamarine">a.</div><!--
  --><div id="10" class="item item10 aquamarine">a.</div><!--
  --><div id="11" class="item item11 aquamarine">a.</div><!--
  --><a class="next-arrow" href="">&lt;</a>
  
 </div>

Answer 1

动画添加了 overflow: hidden ，当与 vertical-align: baseline 结合使用时，它似乎会影响垂直对齐。添加溢出：隐藏到所有项目修复它：

div.item {
  overflow: hidden;
}

或者，如果您不想在所有项目上隐藏溢出，您可以将垂直对齐方式设置为基线以外的内容：

div.item {
  vertical-align: top;
}

Div 出现在其正常位置 "during the time they are displaying" 下方并具有动画效果？

Divs appear below their normal place "during the time they are displaying" with animation effect?

javascript

css

jquery

animation

jquery-animate