to toggle divs by time or with click

Question

to toggle divs by time or with click

Navigation

#1 by (3 votes)

2

I'm working with the following js:

$(document).ready(function () {
  var allBoxes = $("div.boxes").children("div");
  transitionBox(null, allBoxes.first());
});

function transitionBox(from, to) {
  function next() {
      var nextTo;
      if (to.is(":last-child")) {
          nextTo = to.closest(".boxes").children("div").first();
      } else {
          nextTo = to.next();
      }
    to.fadeIn(500, function () {
        setTimeout(function () {
            transitionBox(to, nextTo);
        }, 5000);
    });
  }

   if (from) {
      from.fadeOut(500, next);
  } else {
      next();
  }
}

In which I have several divs that are going through time. But now I would like it to happen also with the click. I tried to pass with the ids in the divs but it did not work for me. I understand that it is something with an onclick event but I do not know how to do it.

Any ideas? Thank you. ( Here you have the jsfiddle in case it helps )

  $(document).ready(function () {
      var allBoxes = $("div.boxes").children("div");
      transitionBox(null, allBoxes.first());
  });

  function transitionBox(from, to) {
      function next() {
          var nextTo;
          if (to.is(":last-child")) {
              nextTo = to.closest(".boxes").children("div").first();
          } else {
              nextTo = to.next();
          }
          to.fadeIn(500, function () {
              setTimeout(function () {
                  transitionBox(to, nextTo);
              }, 5000);
          });
      }
      
      if (from) {
          from.fadeOut(500, next);
      } else {
          next();
      }
  }

.boxes div{
  display:none;
}
.sizeR{
  width:500px;
  height:500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boxes">
    <div class="box1" id="1">
      text1
      <a href="#2" ><img class="sizeR" src="http://rlv.zcache.es/van_los_platanos_pegatina_cuadrada-r144680d35e3e45a0ad2282b310141c3d_v9wf3_8byvr_324.jpg"></a>  
    </div>
    <div class="box2" id="2">
      text2
      <a href="#3" ><img class="sizeR" src="http://rlv.zcache.es/pares_de_platanos_del_dibujo_animado_pegatina_cuadrada-r46c488b848514841a3aa27aaec211f22_v9wf3_8byvr_324.jpg"></a>  
    </div>
    <div class="box3" id="3">
      text3
      <a href="#1" ><img class="sizeR" src="http://rlv.zcache.es/deme_los_platanos_pegatina_cuadrada-r25a2e828474b4281b475f1148b382be4_v9wf3_8byvr_324.jpg"></a>
    </div>
</div>

jquery html css

asked by David 09.09.2016 в 11:43

source

1 answer

Differences between Maven and Gradle Problem with RecyclerView on Android

score 3 · Accepted Answer

You could add a click event to the container of the boxes and use the selector :visible to know which is the what is currently showing

I had to make some modifications to your code like extract the function findNext to know what is the next element and not have to repeat the selection algorithm that you had created. The timeout is also necessary to clean it in each transition otherwise you change the image too soon.

This way you only have to use a click event instead of several individual events which will allow you to add any number of elements without changing any code.

$(document).ready(function() {
  var boxContainer = $('.boxes');
  var allBoxes = boxContainer.children("div");
  var timeout;
  transitionBox(null, allBoxes.first());

  boxContainer.click(function() {
    var from = boxContainer.children('div:visible');
    var to = findNext(from);
    transitionBox(from, to);
  });

  function findNext(to) {
    if (to.is(":last-child")) {
      return to.closest(".boxes").children("div").first();
    } else {
      return to.next();
    }
  }

  function transitionBox(from, to) {
    clearTimeout(timeout);

    function next() {

      var nextTo = findNext(to);

      to.fadeIn(500, function() {
        timeout = setTimeout(function() {
          transitionBox(to, nextTo);
        }, 5000);
      });
    }

    if (from) {
      from.fadeOut(500, next);
    } else {
      next();
    }
  }
});

.boxes div {
  display: none;
}
.sizeR {
  width: 500px;
  height: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boxes">
  <div class="box1" id="1">
    text1
    <a href="#2">
      <img class="sizeR" src="http://rlv.zcache.es/van_los_platanos_pegatina_cuadrada-r144680d35e3e45a0ad2282b310141c3d_v9wf3_8byvr_324.jpg">
    </a>
  </div>
  <div class="box2" id="2">
    text2
    <a href="#3">
      <img class="sizeR" src="http://rlv.zcache.es/pares_de_platanos_del_dibujo_animado_pegatina_cuadrada-r46c488b848514841a3aa27aaec211f22_v9wf3_8byvr_324.jpg">
    </a>
  </div>
  <div class="box3" id="3">
    text3
    <a href="#1">
      <img class="sizeR" src="http://rlv.zcache.es/deme_los_platanos_pegatina_cuadrada-r25a2e828474b4281b475f1148b382be4_v9wf3_8byvr_324.jpg">
    </a>
  </div>
</div>

You could also add a throttle to your click function so that it shows up correctly if they give you many clicks followed in this way.

// 500ms es el tiempo que se toma tu imagen en aparecer
boxContainer.click($.throttle(500, function() {
    var from = boxContainer.children('div:visible');
    // .......
    // Codigo del click
}));