All geek questions in one place

JQuery - nested or non-directional transitions and animation event handlers / listeners

I am currently working on a set of code that runs every time a certain ajax call occurs.

For this, I use the snippet below (these are errors, since I think there is no html or css, but this is normal, as I am just trying to show my code):

$(document).ajaxStart(function() {
  if ($('.spinner').length < 1) { //as there is no ajaxStop, this makes sure there is not already a spinner
    $('body').prepend('<div class="spinner" title="Spinner stuck? Click to remove!"></div>');
  }
  $('body div').not('.spinner').css('opacity', '0.5'); //this is potentially unnecessary
});

//the rest of the ajax call is not included - just the .done()
.done(function(xhr) {
  $('body div').not('.spinner').css('opacity', '0');
  $('body').one('transitionend', function(e) {
    $('body div').not('.spinner').remove();
    $('body').append(xhr);
    $('body div').not('.spinner').css('opacity', '0.1');
    $('body').one('transitionend', function(e) {
      $('body div').css('opacity', '1');
      $('.spinner').remove();
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
Run codeHide result

, .one('transitionend') s, , ( : ajax. ajax, ajax - , $('body div').not('.spinner').css('opacity', '0.1');, ).

jsfiddle. .

( ), , ( , ​​ - , ), , log - $('#log span').text($('#div1').text()); ..).

, jsfiddle :

var newCss = {
  backgroundColor: 'blue',
  width: '25%',
  color: 'white'
};
var disabled = false;
$(document).on('click', '#div1', function(e) {
  if (disabled) return;
  notNested($(this));
});

$(document).on('click', '#div8', function(e) {
  if (disabled) return;
  nested($(this));
});

function notNested($this) {
  disabled = true;
  $this.css(newCss);
  $('#log span').text($('#div1').text());
  $('#div1').one('transitionend', function() {
    $('#div2').css(newCss);
    $('#log span').text($('#div2').text());
  });
  $('#div2').one('transitionend', function() {
    $('#div3').css(newCss);
    $('#log span').text($('#div3').text());
  });
  $('#div3').one('transitionend', function() {
    $('#div4').css(newCss);
    $('#log span').text($('#div4').text());
  });
  $('#div4').one('transitionend', function() {
    $('#div5').css(newCss);
    $('#log span').text($('#div5').text());
  });
  $('#div5').one('transitionend', function() {
    $('#div6').css(newCss);
    $('#log span').text($('#div6').text());
  });
  $('#div6').one('transitionend', function() {
    $('#div7').css(newCss);
    $('#log span').text($('#div7').text());
  });
  $('#div7').one('transitionend', function() {
    $('div').removeAttr('style');
    $('#log span').text('');
    disabled = false;
  });
}

function nested($this) {
  disabled = true;
  $this.css(newCss);
  $('#log span').text($('#div8').text());
  $('#div8').one('transitionend', function() {
    $('#div9').css(newCss);
    $('#log span').text($('#div9').text());
    $('#div9').one('transitionend', function() {
      $('#div10').css(newCss);
      $('#log span').text($('#div10').text());
      $('#div10').one('transitionend', function() {
        $('#div11').css(newCss);
        $('#log span').text($('#div11').text());
        $('#div11').one('transitionend', function() {
          $('#div12').css(newCss);
          $('#log span').text($('#div12').text());
          $('#div12').one('transitionend', function() {
            $('#div13').css(newCss);
            $('#log span').text($('#div13').text());
            $('#div13').one('transitionend', function() {
              $('#div14').css(newCss);
              $('#log span').text($('#div14').text());
              $('#div14').one('transitionend', function() {
                $('#log span').text('');
                $('div').removeAttr('style');
                disabled = false;
              });
            });
          });
        });
      });
    });
  });
}
body {
  display: flex;
  align-items: flex-start;
  /* Can't remember if flex-start is default anyways*/
}
div {
  display: inline-block;
  width: 25%;
}
div > div {
  border: 4px dotted red;
  transition: .25s;
  display: block;
  width: 10%;
  padding: 4px 8px;
  margin: 16px 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div>
  <div id="div1">1</div>
  <div id="div2">2</div>
  <div id="div3">3</div>
  <div id="div4">4</div>
  <div id="div5">5</div>
  <div id="div6">6</div>
  <div id="div7">7</div>
</div>
<div id="log">We got to: <span></span>
</div>
<div>
  <div id="div8">8</div>
  <div id="div9">9</div>
  <div id="div10">10</div>
  <div id="div11">11</div>
  <div id="div12">12</div>
  <div id="div13">13</div>
  <div id="div14">14</div>
</div>
Hide result

, , ? /? .. , ( , ), ? ( , , TUVM)

jQuery . queue . delay, (, ). , ? , setTimeout() - , , ( .one('transitionend'), , , ...)

UPDATE:

, :

, css Jquery, / . , DOM . - Jan_dh

jsfiddle, , , CSS. - ( ​​ jsfiddle ).

, :

, DOM .

, , -, , , ?

+4
1

.queue(), $.map(); .one("transitionend"), , next , transition ; , .slice() , id "div" ; event.data; $.grep(), .filter(); .data(/* name */) true false, , click ; .promise(), .then() ,

var newCss = {
  backgroundColor: "blue",
  width: "25%",
  color: "white"
}
// define `log` variable as `"#log span"`
, log = $("#log span")
// define `divs` variable as all elements where `id` begins with`` "div"
, divs = $("[id^=div]")
// define `col1` variable as `divs` at indexes `0` through `7`
, col1 = divs.slice(0, 7)
// define `col2` variable as `divs` at indexes `7` through `div.length`
, col2 = divs.slice(7, divs.length);

function queueColumn(col, name) {
  // set current collection of elements `.data("active")` to `true`
  return col.data("active", true)
    // set a queue name with `name`, call `$.map()` on current collection
    .queue(name, $.map(col, function(div) {
     // return a function at queue `name` for each element in collection
      return function(next) {
        // set `log` text
        log.text(
          // pass reference of `next` function in queue `name`
          // as handler for `transitionend` event of current element;
          // call `next` function in queue `name`
          // at `transitionend` event of element
          $(div).one("transitionend", next).css(newCss).text()
        )
      }
    // call first function in queue;
    // when all function in queue `name` complete,
    // return queue `name` jQuery promise object
    })).dequeue(name).promise(name)
}
// handle `click` event at `#div1`, `#div8` elements
function handleQueue(e) {
  // define `curr` variable;
  // filter array containing `col1`, `col2` collections
  // to match collection containing `#div1` or `#div8`     
  var curr = $.grep(e.data, function(col) {
    return col.filter(e.target).length
  }).pop();
  // create `name` for queue
  var name = `col${$.inArray(curr, e.data) + 1}-${$.now()}`;
  // check if `curr` `.data("active")` is `undefined` 
  // at first click of element, if true, 
  // set `curr` `.data("active")` to `false` 
  if (curr.data("active") === undefined) {
    curr.data("active", false);
  }
  if (curr.data("name") === undefined) {
    curr.data("name", name);
  }
  console.log(`queue ${curr.data("name")} is active:`
             , `${!curr.queue(name).length 
                  || curr.data("active")}`);
  // define `inprogress` as `curr.data().active`
  var inprogress = curr.data().active;
  // check if `inprogress` is `false`, if true, call call `queueColumn`
  // with `curr`, `name` as parameters
  // if `#div1` or `#div8` element are clicked during 
  // during queue, while `inprogress` is `true`,
  // return `false` from event handler to prevent
  // multiple queues to be set at `curr` at same time
  return !inprogress
         ? queueColumn(curr, name)
           // do stuff when current queue `name` completes
           // calling all functions in queue array
           .then(function() {
             console.log(`${this.data("name")} queue complete`);
             // remove element `style`, reset `.data()`
             this.removeAttr("style")
             .data({"active": false, "name": void 0});        
            }) 
           // else return `false` 
         : inprogress
}
// at `click` of `#div1`, `#div8`, call `handleQueue`,
// pass array containing `col1`, `col2` as `event.data`
$("#div1, #div8").click([col1, col2], handleQueue);
body {
  display: flex;
  align-items: flex-start;
  /* Can't remember if flex-start is default anyways*/
}
div {
  display: inline-block;
  width: 25%;
}
div > div {
  border: 4px dotted red;
  transition: .25s;
  display: block;
  width: 10%;
  padding: 4px 8px;
  margin: 16px 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>
<div>
  <div id="div1">1</div>
  <div id="div2">2</div>
  <div id="div3">3</div>
  <div id="div4">4</div>
  <div id="div5">5</div>
  <div id="div6">6</div>
  <div id="div7">7</div>
</div>
<div id="log">We got to: <span></span>
</div>
<div>
  <div id="div8">8</div>
  <div id="div9">9</div>
  <div id="div10">10</div>
  <div id="div11">11</div>
  <div id="div12">12</div>
  <div id="div13">13</div>
  <div id="div14">14</div>
</div>
Hide result
+2

Source: https://habr.com/ru/post/1652735/

More articles:


All Articles