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>

我想要做的就是这样，当我点击按钮时，它会从原来的蓝色“闪烁”变为黄色并再次返回以突出显示它被按下的事实。

我到目前为止最接近的是使用上面的代码，但这远远不是'闪光'，更像是一个口吃。

最好的方法是什么？

我尝试使用animate，但无法看到如何为添加/删除类设置动画。

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

jQuery Make item＆＃39; flash＆＃39;点击时

1 个答案: