jQuery Make item 'flash' when clicked -



jQuery Make item 'flash' when clicked -

i have next code:

<style> .submit input, .submit { 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>

what trying when click button, 'flashes' original bluish yellowish , 1 time again highlight fact pressed.

the closest have got far above code, far 'flash', more stutter.

what best way go this?

i tried utilize animate, couldn't see how animate add together /remove class.

jsfiddle

you dont have have basic style rules of input set sec class, when class switched lose things padding, box-shadow, etc.

i rearranged style rules more explicitly things ( note left border on yellowish 1 because don't know want it).

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

you can add together in css transitions smooth out color alter if youre feeling frisky. have initial #sg1 style rules of this:

#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 jquery-ui jquery-animate

Comments

Post a Comment

Popular posts from this blog

java Multi query from Mysql using netbeans -

java Multi query from Mysql using netbeans - i have java code retrieve info mysql appropriate code in netbeans.the code below. want multi query such illustration finding total number of products , on.could help me please. in advance import java.sql.*; public class javamysqlselectexample { public static void main(string[] args) { seek { string mydriver = "com.mysql.jdbc.driver"; string myurl = "jdbc:mysql://localhost/sample"; class.forname(mydriver); connection conn = drivermanager.getconnection(myurl, "root", "mypasscode1"); string query = "select * products"; statement st = conn.createstatement(); resultset rs = st.executequery(query); while (rs.next()==true) { int code = rs.getint("code"); string productname = rs.getstring("product_name"); string producttype = rs.getstring("product_type"); system.out.format(" %d, %s, %s\n", code, pr
Read more

c# - DotNetZip fails with "stream does not support seek operations" -

c# - DotNetZip fails with "stream does not support seek operations" - i using dotnetzip in c# unzip stream follows: public static void unzipfromstream(stream stream, string outdir) { //omit seek grab block using (zipfile zip = zipfile.read(stream)){ foreach (zipentry e in zip){ e.extract(outdir, extractexistingfileaction.overwritesilently); } } } stream obtained using webclient client = new webclient(); stream fs = client.openread(url); however, got next exception exception during extracting zip stream system.notsupportedexception: stream not back upwards seek operations. @ system.net.connectstream.get_position() @ ionic.zip.zipfile.read(stream zipstream, textwriter statusmessagewriter, encoding encoding, eventhandler`1 readprogress) on server side(asp.net mvc 4), returning filepathresult or filestreamresult both caused exception. should obtain stream differently on client side? or how create server homec
Read more

c++ - StartServiceCtrlDispatcher don't can access 1063 error -

c++ - StartServiceCtrlDispatcher don't can access 1063 error - i write on c++ service , have error, , don't can fixed it. my service main function int main (int argc, tchar *argv[]) {dword f; for(int i=0;i<113;i++) f = getlasterror(); servicepath = lptstr(argv[0]); outputdebugstring(_t("my sample service: main: entry")); //installservice(); service_table_entry servicetable[] = { {service_name, (lpservice_main_function) servicemain}, {null, null} }; // startservice(); if(!startservicectrldispatcher(servicetable)) { f = getlasterror(); //addlogmessage("error: startservicectrldispatcher"); } else if( memcmp(argv[argc-1],"install",7)) { installservice(); } else if( memcmp(argv[argc-1],"remove",6)) { removeservice(); } else if( memcmp(argv[argc-1],"start",5)) { startservice(); } else if( memcmp(argv[argc-1],"stop",4))
Read more