单击时jQuery使项目“闪烁”

Posted 2023-05-08

【中文标题】单击时jQuery使项目“闪烁”

【英文标题】：jQuery Make item 'flash' when clicked

【发布时间】：2014-12-31 14:37:18

【问题描述】：

我有以下代码：

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

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

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

最好的方法是什么？

我尝试使用动画，但看不到如何动画添加/删除类。

【问题讨论】：

与所提出的问题无关，我想知道为什么您需要在 <p> 内添加一个 submit 按钮...

好问题 - 我不记得有什么理由，但不是作为一名程序员（更像是一名 DBA），这是我多年来养成的（可能是许多）坏习惯之一。我的大部分代码通常是从旧项目中剪切和粘贴的，然后“改进”。

您想要this 之类的东西，或者您所说的flash 是指别的什么......？

by 'flash' 它基本上只是提醒用户按钮已被按下（或者当我将其转换为我的实际脚本时 - 按钮已出现）。这当然是我努力的一个进步。干杯。

【参考方案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; 

【讨论】：

干杯，看起来不错。有紧急事情发生，但我希望明天再仔细看看。