Búsqueda de sitios web

javascript - ¿Cómo agrego una transición al efecto de hide() y show() en estos elementos?

En el siguiente SSCCE, ¿cómo puedo animar la aparición de los .item usando show() y su desaparición usando hide(), de manera que parezca que item5, item6, item7 y item8 han volado hacia la ventana de visualización?

Es decir, lo que quiero es que cuando se haga clic en .next-arrow, por ejemplo la primera vez, la ocultación de item1, item2, item3, item4, y la muestra de item5, item6, item7, item8, sea "transicionada" - tal como las nuevas páginas entran en el viewport en este sitio web.

¿Cómo puedo hacer eso?

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

});
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="">&gt;</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>

Respuesta #1

Si quieres usar solo show() y hide(), puedes usar show('slow') y hide('slow'), etc. Aparte de eso, hay muchas formas y efectos que puedes usar.

Por favor, sigue este enlace para conocer cuántas formas había de hacer esto.

Efectos de jQuery

Respuesta #2

Puedes usar transiciones CSS o animaciones CSS. Animaciones como:

  1. Define las reglas de la clase CSS y asigna el nombre de la clase a los elementos que quieras animar

.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;
}
  1. Define fotogramas clave para las animaciones

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

Al asignar doFadeIn al nombre de la clase de los elementos, ellos: Aparecerán con un fundido - opacidad:0 a 1 (0% visible a 100% visible) Se moverán a lo largo del eje horizontal (X) 100px a la izquierda de la posición original del elemento hasta su posición original.

Hará esto durante un período de 150 milisegundos

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