Question

我想要做的是当用户点击某些内容时：

<div id="FormContainer">
    <form>
     ...
    </form>
</div>

<a href="#" onClick="FlashElement()">Make it flash</a>

它在FormContainer内的表单周围短暂闪烁一个矩形。有什么方法可以实现这个目标吗？

Answer 1

一种快速而简单的方法是绘制彩色边框，然后在短时间后将其删除：

function FlashElement() {
  var $el=$('#FormContainer'), oldBorder=$el.css('border');
  $el.css({border:'4px solid yellow'});
  setTimeout(function() { $el.css({border:oldBorder}); }, 500);
}

如果你想要一个重复的闪烁效果，那么你可以多次调用“setTimeout”以所需的间隔隐藏/显示边框，例如：

  // ...
  var newBorder = '4px solid yellow';
  $el.css({border:newBorder});
  setTimeout(function() { $el.css({border:oldBorder}); }, 100);
  setTimeout(function() { $el.css({border:newBorder}); }, 200);
  setTimeout(function() { $el.css({border:oldBorder}); }, 300);
  setTimeout(function() { $el.css({border:newBorder}); }, 400);
  setTimeout(function() { $el.css({border:oldBorder}); }, 500);

Answer 2

将animate功能与“color”插件结合使用。示例：http://jsfiddle.net/mostthingsweb/wjDJm/4/

<强> HTML：

<div>my content</div>

<br/>
<button id='button'>Click me</button>

<强> CSS：

div {
    padding: 3px;
    border: 1px solid transparent;
}

<强> JS：

function makeColors(color){
    return {
        borderTopColor: color,
        borderBottomColor: color,
        borderRightColor: color,
        borderLeftColor: color
    }
}

$("#button").click(function() {
    $("div").stop().animate(makeColors("red"), 1000, function(){
       $(this).animate(makeColors("transparent"), 500);         
    });
});

注意：

通过CSS创建一个初始透明边框，以防止元素“跳跃”，这是突然添加1px边框时的情况。
需要颜色插件：https://github.com/jquery/jquery-color

Answer 3

使用this plugin和以下代码以及here's the demo

$(function() {
    $('div').on('click', function() {
        $el = $(this);
        $el.css({border:'1px solid #FFF'});
        $el.animate({
            'borderColor': '#F00'
        });
        setTimeout(function() {
            $el.animate({
                'borderColor': '#FFF'
            });
        }, 1000);
    });
});

如何在表格周围快速闪烁一个矩形？

3 个答案: