单击时 jQuery 将项目设为 'flash'

Question

我有以下代码:

        <style>
.submit input, .submit a
{
   border-top: 1px solid #96d1f8;
   background: #b2d4eb;
   background: -webkit-gradient(linear, left top, left bottom, from(#9ebbce), to(#b2d4eb));
   background: -webkit-linear-gradient(top, #9ebbce, #b2d4eb);
   background: -moz-linear-gradient(top, #9ebbce, #b2d4eb);
   background: -ms-linear-gradient(top, #9ebbce, #b2d4eb);
   background: -o-linear-gradient(top, #9ebbce, #b2d4eb);
   padding: 5px 10px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: black;
}

.submitHighlight
{
    background: #FFFF99;    
}

.BtnSmall
{
    width: 15em;
    float: right;
    margin-right: 2em;
    margin-bottom: 1em; 
    display: none;
}
</style>

    <script language="JavaScript" src="..\Generic\JAVASCRIPT\jQuery-min.js" type="text/javascript"></script>
    <script language="JavaScript" src="..\Generic\JAVASCRIPT\jQuery-ui-min.js" type="text/javascript"></script>
    <script language="JavaScript">
    $(document).ready(function()
    {
        $("#SG1").click(function()
            {
                $(this).parent().switchClass('submit','submitHighlight','slow').delay(2000).switchClass('submitHighlight','submit','slow');
            })  
    })

    </script>

    <p class="submit">
        <input id="SG1" class="BtnSmall" type="submit" name="submit" value="SG1" style="display: inline-block;">
    </p>

我想做的是获取它，以便当我单击按钮时，它会从原来的蓝色“闪烁”到黄色，然后再次返回以突出显示它被按下的事实。

到目前为止，我得到的最接近的是上面的代码，但这远非“闪光”，更多的是口吃。

解决这个问题的最佳方法是什么？

我尝试使用动画，但不知道如何为添加/删除类添加动画。

Answer 1

jsfiddle

您没有第二个类的输入集的基本样式规则，因此当切换类时，您会丢失诸如填充、框阴影等内容。

我重新排列了您的样式规则，以更明确地执行操作(请注意，我将您的边框保留在黄色边框上，因为我不知道您想用它做什么)。

#SG1 {
    padding: 5px 10px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: black;   
}
.submit #SG1
{
   border-top: 1px solid #96d1f8;
   background: #b2d4eb;
   background: -webkit-gradient(linear, left top, left bottom, from(#9ebbce), to(#b2d4eb));
   background: -webkit-linear-gradient(top, #9ebbce, #b2d4eb);
   background: -moz-linear-gradient(top, #9ebbce, #b2d4eb);
   background: -ms-linear-gradient(top, #9ebbce, #b2d4eb);
   background: -o-linear-gradient(top, #9ebbce, #b2d4eb);
}

.submitHighlight #SG1
{
    background: #FFFF99;
}

.BtnSmall
{
    width: 15em;
    float: right;
    margin-right: 2em;
    margin-bottom: 1em; 
    display: none;
}

如果您感觉活泼，您还可以添加一些 css 过渡来平滑颜色变化。那么你就会有一个像这样的初始 #SG1 样式规则:

#SG1 {
    padding: 5px 10px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: black;  
   transition: background 1s ease; 
}