Jquery flickering background image -
i have 2 questions regarding jquery , background image. have simple html page:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>dreamweaver test</title> <link rel='stylesheet' type='text/css' href='stylesheet.css'/> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> </head> <body> <div id="outer"> <div id="container"> <div id="inner"> </div> </div> </div> </div> </body> </html>
and css:
@charset "utf-8"; /* css document */ * {margin:0;padding:0} /* mac hide \*/ html,body{height:100%;width:100%;} /* end hide */ body { background-color: black; text-align:center; min-height:468px;/* browsers*/ min-width:552px;/* browsers*/ } #outer{ height:100%; width:100%; display:table; vertical-align:middle; } #container { text-align: center; position:relative; vertical-align:middle; display:table-cell; height: 468px; } #inner { width: 500px; height: 500px; text-align: center; margin-left:auto; margin-right:auto; background-image: url(mainpage.jpg); }
as can see have background image inner div , want following:
i have created image called mainpageflickering.jpg whichs different. want image flicker (like broken lamp) , think possible jquery, dont know how. these 2 questions:
how can tell jquery use background image change? how can tell jquery flicker (example: 2 seconds normal image, 1 second of flickering, 2 seconds normal image, 1 second of flickering(everytime))?
i hope can me out this.
jq:
var $flickimg = $('#inner img'), c = 0; (function loop(){ var time = ~~(math.random()*600) + 1; $flickimg.delay( time ).fadeto(30, ++c%2, loop); })();
html:
<div id="inner"> <img src="image.jpg"> </div>
css:
#inner{ background: url(backgroundimage.jpg); }