Is there a blink plugin in jQuery to implement the following?

Question

Specify a $target,then it'll flash itself toward $target,

it's used to inform user which part is to be filled right when submitting a form.

EDIT:

particularly,what I want to blink is a .

Answer 1

You could make a function like this one. As you didn't specify how it should blink or how many times, I made it change the background color to red and then after 500 ms change it back to the previous. This will make it seem like it blinks.

  function blink($target) {
    // Set the color the field should blink in
    var backgroundColor = 'red';
    var existingBgColor;

    // Load the current background color
    existingBgColor = $target.css('background-color');

    // Set the new background color
    $target.css('background-color', backgroundColor);

    // Set it back to old color after 500 ms
    setTimeout(function() { $target.css('background-color', existingBgColor); }, 500);
  }

When you want to call the blink function just do this:

function processForm() {
   blink($("#name"));
}

This will work if you have an input field with ID 'name'

---

Blink a select element

HTML:

  <select id="selectList">
    <option>Hello</option>
    <option>World</option>
  </select>

JavaScript (for example on ready):

$(function() { 
   blink($("#selectList")) 
});

Answer 2

I actually did something similar. I wanted to make a div blink until a condition had been met (the div had been clicked and its onclick event triggered).

    function blink($target) {
        if (X == Y) {
            $target.removeClass("BlinkClass");
        } else {
            $target.addClass("BlinkClass");
            setTimeout(function() { $target.removeClass("BlinkClass"); }, 500);
            setTimeout(function() { blink($target); }, 700);
        }
    }

This function essentially adds and removes a CSS class until interrupted by the if. Apply it to an element with:

    blink($("#ItemToBlink"));

Answer 3

I kinda like this one:

function blink($target, $backgroundColor, $interval, $times) { // Load the current background color var existingBgColor = $target.css('background-color');

for (var i = 0; i != $times; ++i) { // Set the new background color setTimeout(function () { $target.css('background-color', $backgroundColor); }, $interval * i * 2);

// Set it back to old color
setTimeout(function () { $target.css('background-color', existingBgColor); }, $interval * (i * 2 + 1));

} }