javascript - How to add jQuery function to hover (show) and then click to show another menu -
hello want ask jquery
- how add jquery hover (show) function jquery? ( want show #menuwrap when hover area)
2.i want add jquery function, when click menu, hide #menuwrap again , show menu content
my html
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>tes - web testing</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="js/tes.js"></script> <link rel="stylesheet" type="text/css" href="css/tes.css"> </head> <body> <div id="titletext"> <h1>... test ...</h1> </div> <div id="menuwrap"> <div id="menu"> <div id="menu1"> </div> </div> <div id="menutext"> <h1 id="menucontent" href="xxx">menu</h1> </div> </div> </body> </html> my css
@import url(http://fonts.googleapis.com/css?family=montserrat); * { margin: 0px !important; padding: 0px !important; height: 100%; width: 100%; overflow: hidden; } html { min-width: 10%; min-height: 10%; } body { z-index: -1; background-attachment: fixed; background-color: #17807a; } #titletext { position: fixed; z-index: 1; margin-top: 0px !important; padding-top: 0px !important; height: 70px; background-color: #ffffff; } #titletext h1 { margin: 0px auto; text-align: center; color: #0e4e4b; font: 40px 'montserrat'; } #menuwrap { position: fixed; top: 550px; left: 640px; } #menu { display: block; position: fixed; height: 100px; width: 100px; border-radius: 70px; border-width: 5px; border-style: solid; border-top-color: #ffffff; border-bottom-color: #ffffff; border-left-color: transparent; border-right-color: transparent; -moz-animation: cw; -moz-animation: cw 5s infinite; } #menu1 { position: absolute; height: 70px; width: 70px; border-radius: 60px; border-width: 5px; border-style: solid; border-top-color: transparent; border-bottom-color: transparent; border-left-color: #ffffff; border-right-color: #ffffff; top: 10px; left: 10px; -moz-animation: ccw; -moz-animation: ccw 3s infinite; } #menutext { position: absolute; top: 27px; left: 27px; } #menutext h1 { position: absolute; font-size: 12px; color: #ffffff; letter-spacing: 3px; top: 19px; left: 4px; } @-moz-keyframes cw { 0%{ -moz-transform: rotate(0deg); } 100%{ -moz-transform: rotate(360deg); } } @-moz-keyframes ccw { 0%{ -moz-transform: rotate(0deg); } 100%{ -moz-transform: rotate(-540deg); } } my jquery
jquery(function() { settimeout("jquery('#menuwrap').fadeout('2000');", 3000); }); thanks in advance :)
you can use fadeto() function task:
settimeout(function () { $('#menuwrap').fadeto('slow', 0); }, 3000); $('#menuwrap').hover(function () { $(this).fadeto('slow', 1); }, function () { $(this).fadeto('slow', 0); });
Comments
Post a Comment