Question

在下面的SSCCE中，如何使用.item使用show()设置hide()的外观并使用item5消失它们，使其看起来像item6，{ {1}}，item7，item8已飞入视口？

也就是说，我想要的是，当点击.next-arrow时，例如第一次隐藏item1，item2，item3，{ {1}}，item4，item5，item6，item7的展示是＆＃34;过渡＆＃34; - 就像新页面流入视口in this website.

一样

我该怎么做？

＆＃13;

item8

＆＃13;

$(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.previous-arrow').click(function(event) {
    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();
  });



  /**
   * 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;
  }

});

＆＃13;

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;
}

＆＃13;

Answer 1

您可以使用css过渡或css动画。动画如：

定义css类规则并为要设置动画的元素指定类名

.doFadeIn {
    -webkit-animation:fadeInSlide forwards ease-in 150ms;
    animation:fadeInSlide forwards ease-in 150ms;
}
.doFadeOut {
    -webkit-animation:fadeOutSlideDown forwards ease-out 150ms;
    animation:fadeOutSlideDown forwards ease-out 150ms;
}

定义动画的关键帧

    @keyframes fadeInSlide
    {
         0% { opactity:0; transform: translateX(-100px); }
         100% { opactity:1; transform: translateX(0); }
    }

将doFadeIn分配给元素的类名时，它们将：淡入 - 不透明度：0到1（0％可见到100％可见）沿元素原始位置左侧100px的水平轴（X）移动到原始位置。

它将在150毫秒的持续时间内完成此任务

<div id="my-widget1" class="my-widget"><div>
  
<div id="my-widget1" class="my-widget doFadeIn"><div>

Answer 2

如果你只想使用show（）和hide（），你可以使用show（＆＃39; slow＆＃39;）和hide（＆＃39; slow＆＃39;）等。除此之外还有您可以使用的许多方法和效果。

请点击此链接了解有多少方法可以做到这一点。

jQuery Effects

Answer 3

您可以传递show()函数的参数，例如.show('slow')，它将执行fadeIn()函数之类的动画。

使用示例

检查documentation

Answer 4

您可以使用.hide()、fadeOut()、show()、fadeIn()

示例代码

您可以使用 .show() 来显示匹配的元素。

当用户在输入文本上输入内容时显示列表的示例代码。

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

您可以使用 .hide() 来隐藏匹配的元素。

当用户点击屏幕上的其他地方隐藏列表时的示例代码。

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

但我个人使用 .fadeIn() 和 fadeOut()，因为这两种方法具有流畅的动画效果。

您可以按照上述答案查看官方文档。

如何在这些元素上添加对hide（）和show（）的效果的转换？

4 个答案: