Utilizing Jquery for independently blinking text counters

Question

Utilizing Jquery for independently blinking text counters

Whenever the user presses a button, a message is created and blinks 5 times. However, each time the button is pressed, all previous messages also blink along with the new one. The goal is to make only the new message blink individually 5 times upon each button press.

Sample HTML:

<div id="result"></div>
<button id="but">Click to Blink Message</button>

JavaScript Code:

var counter = 0;
var i = 0;

function blink(selector){
    $(selector).fadeOut('slow', function(){
        $(this).fadeIn('slow', function(){
            if(counter++ <= 5)
                blink(this);
        });
    });
}

$("#but").click(function() {
    i++;
    counter = 0;
    $('#result').prepend("<div class='num'>Number " + i + "</div>");
    blink('.num');
});

View JSFIDDLE Demo

The issue might be that there is only one counter being used for blinking, causing all messages to blink together. How can a new counter be created every time the button is pressed? And how does the blink function differentiate which counter to use? Various attempts have been made without success. Any suggestions?

javascript jquery html css

Answer 1

Answer №1

The reason is that all the additional elements have the same selector class number.

It looks something like this:

$("#but").click(function() {
    i++;
    counter = 0;
    sel = 'num' + i;
    $('#result').prepend("<div class='"+sel+"'>Number " + i + "</div>");
    blink('.' + sel);
});

Answer 2

The reason is that all the additional elements have the same selector class number.

It looks something like this:

$("#but").click(function() {
    i++;
    counter = 0;
    sel = 'num' + i;
    $('#result').prepend("<div class='"+sel+"'>Number " + i + "</div>");
    blink('.' + sel);
});

Answer 3

Answer №2

UPDATE: A request was made to have the old message continue blinking 5 more times. You can see the code for this modification on JSFiddle.

var counter, i = 0;

function blink(selector) {
    for(counter = 0; counter < 5; counter++){
    $(selector).fadeOut('slow').fadeIn('slow');
    }
}

$("#but").click(function () {
    ++i;
    counter = 0;
    $('#result').prepend('<div id="id-' + i + '">Number ' + i + '</div>');
    blink('#id-' + i);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="result"></div>
<button id="but">Blink again 1</button>

Answer 4

UPDATE: A request was made to have the old message continue blinking 5 more times. You can see the code for this modification on JSFiddle.

var counter, i = 0;

function blink(selector) {
    for(counter = 0; counter < 5; counter++){
    $(selector).fadeOut('slow').fadeIn('slow');
    }
}

$("#but").click(function () {
    ++i;
    counter = 0;
    $('#result').prepend('<div id="id-' + i + '">Number ' + i + '</div>');
    blink('#id-' + i);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="result"></div>
<button id="but">Blink again 1</button>

Answer 5

Answer №3

After some investigation, it seems like the issue lies in my use of a single counter for blinking. This results in all messages blinking together. To address this, I am looking into creating a new counter each time the button is pressed.

To achieve this, I plan on assigning different class names for every button click. By utilizing the deprecated .selector method to target specific elements, I aim to prevent all HTML elements from being updated simultaneously. It's also crucial to avoid using the selector .num:eq(n), as calling .prepend() again could cause existing elements to no longer be at index 0, leading to simultaneous blinking of all elements.

function blink(callback) {
  var sel = $(this.selector);
  if (sel.data().count === undefined) {
    sel.data("count", blink.counter);
  }
  sel.fadeOut('slow', function() {
    sel.fadeIn('slow', function() {
      if (sel.data().count < blink.max) {
        sel.data().count = 1 + sel.data().count;
        callback.call(sel);
        sel.blink(callback.bind(sel));
      } else {
        sel.data().count = blink.counter
      }
    });
  });
}

blink.counter = 0;
blink.max = 5;

$.fn.blink = blink;

var i = 0;
$("#but").click(function() {
  $('#result').prepend("<div class=num-" + i + ">Number</div>");
  $(".num-" + i).blink(function() {
    $(this).append($(this).data().count)
  });
  ++i;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="result"></div>
<button id="but">Blink again 1</button>

Check out the code snippet on jsfiddle here.

Answer 6

After some investigation, it seems like the issue lies in my use of a single counter for blinking. This results in all messages blinking together. To address this, I am looking into creating a new counter each time the button is pressed.

To achieve this, I plan on assigning different class names for every button click. By utilizing the deprecated .selector method to target specific elements, I aim to prevent all HTML elements from being updated simultaneously. It's also crucial to avoid using the selector .num:eq(n), as calling .prepend() again could cause existing elements to no longer be at index 0, leading to simultaneous blinking of all elements.

function blink(callback) {
  var sel = $(this.selector);
  if (sel.data().count === undefined) {
    sel.data("count", blink.counter);
  }
  sel.fadeOut('slow', function() {
    sel.fadeIn('slow', function() {
      if (sel.data().count < blink.max) {
        sel.data().count = 1 + sel.data().count;
        callback.call(sel);
        sel.blink(callback.bind(sel));
      } else {
        sel.data().count = blink.counter
      }
    });
  });
}

blink.counter = 0;
blink.max = 5;

$.fn.blink = blink;

var i = 0;
$("#but").click(function() {
  $('#result').prepend("<div class=num-" + i + ">Number</div>");
  $(".num-" + i).blink(function() {
    $(this).append($(this).data().count)
  });
  ++i;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="result"></div>
<button id="but">Blink again 1</button>

Check out the code snippet on jsfiddle here.

Utilizing Jquery for independently blinking text counters

Answer №1

Answer №2

Answer №3

Similar questions

A Guide to Connecting a JavaScript File to an HTML Page with Express and Node.js

Switch a div to a computed location

Angular 4 allows the addition of an image from right to left upon clicking

I am looking to dynamically add and remove an active link on my sidebar using JavaScript

Visual Composer in WordPress is not displaying as expected

The vertical menu was added, but the text did not align properly

What are some tactics for avoiding movement in the presence of a border setting?

Mastering the art of creating an authentic carbon fiber CSS background

Error in saving webpage as HTML

In my chat application, I encountered the error message "Received an expression instead of an assignment or function call - no-unused-expressions"

Encountering issues with link functionality on homepage due to React-Router v6 and Material-UI Tab integration

Creating a PHP script to generate JSON data for fullcalendar integration

Prevent the Icon in Material UI from simultaneously changing

Changing an HTML file formatted with Jquery into a Phonegap compatible version

Combine a string and integer in JavaScript without using quotation marks between them

Error Occurs: 'PRM_MissingPanel' randomly in Ajax Update Panel

Failure to retrieve the value in a variable using JsonQuery in Python

Prevent Second Division from wrapping around floated Division

Execute a function using a click event within a statement

What is the best way to send variables through an HTTP post from a JavaScript function in one file to a separate Python function in a different location?