CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Coolguy
Coolguy

Reputation: 2285

Jquery using individual blinking text counters

I have a button which when user press, it will create a message and blink it 5 times. But the problem is it every time I press the button, the message before will also blink with the new message together. I want the new message to blink individually 5 times every time pressing the button.

html:

<div id="result"></div>
<button id="but">Blink again 1</button>

js:

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');
});

JSFIDDLE

I found out that maybe the problem is that I only use one counter to blink. That's why all the message blink together. But how do I create a new counter everytime the button is press? How do the blink function know which counter to use? I've tried many ways but failed. Do you guys have any idea?

Upvotes: 0

Views: 165

Answers (3)

guest271314
guest271314

Reputation: 1

I found out that maybe the problem is that I only use one counter to blink. That's why all the message blink together. But how do I create a new counter everytime the button is press?

Try creating different class name for each click on button. Using .selector , though deprecated, to filter specific element to avoid all elements html being updated simultaneously. If used selector .num:eq(n) , when .prepend() called again, existing .num element would no longer be at index 0 , causing both, or all elements to blink at once.

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>

jsfiddle http://jsfiddle.net/Vaysf/876/

Upvotes: 0

Mi-Creativity
Mi-Creativity

Reputation: 9654

UPDATE: As "But I want the old message to continue blinking to 5 times too." .. 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>

Upvotes: 0

Hamlet Hakobyan
Hamlet Hakobyan

Reputation: 33381

It is because all added dvis have same selector class num.

Something like this:

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

Upvotes: 1

Related Questions