jQuery - Comparing Nested and Unnested Transition and Animation Event Handlers/Listeners

Question

jQuery - Comparing Nested and Unnested Transition and Animation Event Handlers/Listeners

At the moment, I am working on a block of code that triggers every time a specific ajax call is made.

The snippet I'm using looks like this (although it might throw an error due to absence of html or css - but that's not my concern as I just want to showcase my code):

$(document).ajaxStart(function() {
  if ($('.spinner').length < 1) { //checking for existing spinner
    $('body').prepend('<div class="spinner" title="Spinner stuck? Click to remove!"></div>');
  }
  $('body div').not('.spinner').css('opacity', '0.5'); 
});

.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>

This setup features nested .one('transitionend')s which I'm analysing to determine its correctness. This piece of code handles login and logout responses from ajax calls. While it works well for logging in most cases, it seems to be failing for logout due to issues with registering the end transition. Consequently, the process freezes at

$('body div').not('.spinner').css('opacity', '0.1');

.

I've created a quick test on this jsfiddle to compare nested versus unnested event handlers.

The two approaches seem to yield similar results. However, early on, there were freezing issues when clicking too frequently on either - this was addressed by adding the log bit -

$('#log span').text($('#div1').text());

, etc.

Here's a snippet of the updated jsfiddle:

//code snippet here...

//more code snippets here...

In light of these experiments, I aim to identify the superior method. Which option offers smoother execution and fewer problems for the code or browser? Is there a more effective way to manage code reliant on transitions or animations?

My attempts at utilizing jQuery's .queue and .delay have not yielded results in this context. Perhaps another approach could prove fruitful? Although setTimeout() remains a possibility, maintaining synchronicity may require nesting elements below it. Moreover, while .one('transitionend') appears functional in most instances irrespective of nesting, some scenarios demand further investigation.

UPDATE:

In response to feedback provided on my code:

Some minor pointers on your code, don't do css in Jquery but append/prepend classes with the opacity value. Use variables instead of going through the DOM with every selector. – Jan_dh

I have revised the corresponding jsfiddle to adjust classes rather than directly modifying CSS properties. You can access the updated version through this link: here. However, I seek clarification on:

Use variables instead of going through the DOM with every selector.

If this notion aligns with addressing my query, I welcome insights from individuals who comprehend Jan_dh's suggestion.

javascript jquery html css

Answer 1

Answer №1

To implement a smooth transition between elements, you can utilize various jQuery methods such as .queue(), $.map(), and .one("transitionend"). By attaching the transitionend event to the current transitioning element and setting the handler to call the next function in the queue when the transition is completed, you can control the flow of transitions effectively. Additionally, you can handle multiple columns of elements by using .slice() to split them into separate arrays based on specific criteria like the element ID starting with "div". Pass these arrays to event handlers using event.data and filter specific columns with $.grep() or .filter(). Manipulate the collection of elements by setting their data attributes to control the default action during transitions triggered by user interaction.

var newCss = {
  backgroundColor: "blue",
  width: "25%",
  color: "white"
}
// define `log` variable as `"#log span"`
, log = $("#log span")
// define `divs` variable for elements with IDs starting with "div"
, divs = $("[id^=div]")
// define `col1` as elements from index 0 through 7
, col1 = divs.slice(0, 7)
// define `col2` as elements from index 7 till the end
, col2 = divs.slice(7, divs.length);

function queueColumn(col, name) {
  // set each element in the collection as active
  return col.data("active", true).queue(name, $.map(col, function(div) {
    return function(next) {
      log.text($(div).one("transitionend", next).css(newCss).text())
    }).dequeue(name).promise(name)
}

function handleQueue(e) {
  var curr = $.grep(e.data, function(col) {
    return col.filter(e.target).length
  }).pop();
  var name = `col${$.inArray(curr, e.data) + 1}-${$.now()}`;
  
  if (curr.data("active") === undefined) {
    curr.data("active", false);
  }
  
  if (curr.data("name") === undefined) {
    curr.data("name", name);
  }
  
  var inprogress = curr.data("active");
  
  return !inprogress ? queueColumn(curr, name).then(function() {
    this.removeAttr("style").data({"active": false, "name": void 0});        
  }) : inprogress
}

$("#div1, #div8").click([col1, col2], handleQueue);

body {
  display: flex;
  align-items: flex-start;
}
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>

Answer 2

To implement a smooth transition between elements, you can utilize various jQuery methods such as .queue(), $.map(), and .one("transitionend"). By attaching the transitionend event to the current transitioning element and setting the handler to call the next function in the queue when the transition is completed, you can control the flow of transitions effectively. Additionally, you can handle multiple columns of elements by using .slice() to split them into separate arrays based on specific criteria like the element ID starting with "div". Pass these arrays to event handlers using event.data and filter specific columns with $.grep() or .filter(). Manipulate the collection of elements by setting their data attributes to control the default action during transitions triggered by user interaction.

var newCss = {
  backgroundColor: "blue",
  width: "25%",
  color: "white"
}
// define `log` variable as `"#log span"`
, log = $("#log span")
// define `divs` variable for elements with IDs starting with "div"
, divs = $("[id^=div]")
// define `col1` as elements from index 0 through 7
, col1 = divs.slice(0, 7)
// define `col2` as elements from index 7 till the end
, col2 = divs.slice(7, divs.length);

function queueColumn(col, name) {
  // set each element in the collection as active
  return col.data("active", true).queue(name, $.map(col, function(div) {
    return function(next) {
      log.text($(div).one("transitionend", next).css(newCss).text())
    }).dequeue(name).promise(name)
}

function handleQueue(e) {
  var curr = $.grep(e.data, function(col) {
    return col.filter(e.target).length
  }).pop();
  var name = `col${$.inArray(curr, e.data) + 1}-${$.now()}`;
  
  if (curr.data("active") === undefined) {
    curr.data("active", false);
  }
  
  if (curr.data("name") === undefined) {
    curr.data("name", name);
  }
  
  var inprogress = curr.data("active");
  
  return !inprogress ? queueColumn(curr, name).then(function() {
    this.removeAttr("style").data({"active": false, "name": void 0});        
  }) : inprogress
}

$("#div1, #div8").click([col1, col2], handleQueue);

body {
  display: flex;
  align-items: flex-start;
}
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>

jQuery - Comparing Nested and Unnested Transition and Animation Event Handlers/Listeners

UPDATE:

Answer №1

Similar questions

Generate a query string by selecting certain input values using a button, while disregarding the rest

In the following command, where is the PORT stored: ~PORT=8080 npm App.js?

Creating a cross-platform file writer with PHP and JavaScript

Why is my <li> not centered and my navbar appears 'transparent' when I scroll through in HTML CSS?

Implementing the Jssor slider

Modify styling of complete list upon clicking in React

Developing typeScript code that can be easily translated and optimized for various web browsers

Ways to Ensure the Footer Stays Beneath Your Image Gallery

What are the reasons behind the ineffectiveness of !important in CSS?

Container that can be scrolled under varying heights

What is the best way to rotate a group in ThreeJS while keeping its center as the pivot

react componentdidupdate triggers never-ending iteration

The CSS transition seems to be malfunctioning

Simple HTML/CSS text blocks positioned beside images in a list format

Looking for Protractor CSS functionalities nodes

The SDK generated by AWS API Gateway does not include the JavaScript client file

"Troubleshooting problems with jQuery accordion collapse and styling using CSS

Tips for creating a React component input field design

Two approaches for one single object

Monitoring and refining console.error and console.log output in CloudWatch