CODEWITHSUNDEEP
jqueryplugins
omg
omg

Reputation: 139862

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

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 .

Upvotes: 0

Views: 5818

Answers (3)

csells
csells

Reputation: 2593

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

Upvotes: 0

user174542
user174542

Reputation:

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"));

Upvotes: 0

aolde
aolde

Reputation: 2295

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

Upvotes: 2

Related Questions