Javascript 如何将转换添加到这些元素的hide（）和show（）效果中？

在下面的SSCCE中，如何使用

show（）

设置

.item

的外观动画，以及使用

hide（）

设置其消失动画，使其看起来像

item5

、

item6

、

item7

、

item8

已飞入视口

也就是说，我想要的是，当单击

.next箭头时，例如第一次，隐藏
项目1
，
项目2
，
项目3
，
项目4
，显示
项目5
，
项目6
，
项目7
，
项目8
，是“转换的”-就像新页面流入视口一样

我该怎么做


$（文档）.ready（函数（）{
//警报（'ready'）；//检查
var numberOfItems=$（'.item'）.length；
//警报（'numberOfItems=>'+numberOfItems）；//检查
displayNextArrowOnCondition（）；
displayPreviousArrowOnCondition（）；
/**
*
**/
$（'a.next-arrow'）。单击（函数（事件）{
event.preventDefault（）；
var currentFirstItem=getCurrentFirstItem（）；//var和no var之间的区别因此：如果您在全局范围内，则没有区别。如果您在函数中，则var将创建一个局部变量，“no var”将查找范围链，直到它找到变量或命中全局范围（此时它将创建它）：
$（'div.item'+currentFirstItem）.hide（）；//我们不需要具备检查此元素是否存在的条件，因为只有当numberOfItems大于屏幕上当前可见元素中id最大的项目的id时，才会出现此方法的下一个处理程序箭头。
if（'div.item'+（currentFirstItem+1））.length{//SO：我如何检查jQuery中是否存在元素？在JavaScript中，所有内容都是真的或假的，对于数字，0表示假，其他所有内容都是真的。因此，您可以编写：“if（$（选择器）.length）”-并且不需要>0部分。
$（'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.previous-arrow'）。单击（函数（事件）{
event.preventDefault（）；
var currentFirstItem=getCurrentFirstItem（）；
$（'div.item'+（currentFirstItem-1））.show（）；
if（（'div.item'+（currentFirstItem-2））.length）{
$（'div.item'+（currentFirstItem-2））.show（）；
}
if（（'div.item'+（currentFirstItem-3））.length）{
$（'div.item'+（currentFirstItem-3））.show（）；
}
if（（'div.item'+（currentFirstItem-4））.length）{
$（'div.item'+（currentFirstItem-4））.show（）；
}
hidePreviousArrow（）；
hideNextArrow（）；
displayPreviousArrowOnCondition（）；
displayNextArrowOnCondition（）；
});
/**
*显示下一个箭头时
*1.项目数大于当前视口中显示的最后一个项目的id
**/
函数displayNextArrowOnCondition（）{
//警报（'displayNextArrowOnCondition called'）；//检查
//以相反的顺序遍历项目，找到第一个未被hide（）或display:none隐藏的项目时，将其指定给currentLastItem（因为这是视口中的第一个项目），并从循环中中断。
var currentLastItem=getCurrentLastItem（）；
//警报（'currentLastItem->'+currentLastItem）；//检查
如果（currentLastItem4）{
$（'a.previous-arrow'）.css（'display'，'block'）；
$（'.wrapper'）.mouseover（函数（）{
$（'a.previous-arrow'）.css（'visibility'，'visible'）；
});
$（'.wrapper'）.mouseleave（函数（）{
$（'a.previous-arrow'）.css（'visibility'，'hidden'）；
});
}
}
/**
*显示：如果下一个箭头可见，则无
**/
函数hideNextArrow（）{
//警报（'hideNextArrow called'）；//检查
if（$（'a.next-arrow'）.css（'display'）.toLowerCase（）=='block'）{//在进行任何必要的类型转换后，==运算符将进行相等性比较。===运算符不会进行转换，因此，如果两个值不是相同的类型，===将直接返回false。|以防万一2012年有人想知道：==比==.jsperf.com/comparison-of-comparison快得多。
//警报（$（\'a.next-arrow\'）.attr（\'display\'）.toLowerCase（）=\'block\'）时为是。因此我将其更改为无。；//检查
$（'a.next-arrow'）.css（'display'，'none'）；
}//else{alert（$（\'a.next-arrow\'）.attr（\'display\'）.toLowerCase（）==\'block\'）。}//检查
}
/**
*显示：无上一个箭头（如果可见）
**/
函数hidePreviousArrow（）{
//警报（'调用hidePreviousArrow'）；//检查
//警报（$（'a.previous-arrow'）.css（'display'）；//检查
if（$（'a.previous-arrow'）.css（'display'）=='block'）{
//警报（$（\'a.previous-arrow\'）.attr（\'display\'）.toLowerCase（）==\'block\'）为是。因此我将其更改为无。；//检查
美元（a.previ）
    $("#search-guide").focusin(function () {
      $("#list-user-guides").show();
    });

    $("#search-guide").focusin(function () {
      $("#list-user-guides").hide();
    });