jquery animation with rollover

Question

I have this little page intro with jquery cycle and I am trying to set it up so when you rollover the separate images there is a glow. For some reason it is just not showing up. I tried it with css and js. Does anyone know what is going wrong?

Live: http://daveywhitney.com/moons/

<!DOCTYPE html> 
<html> 
<head> 
<title>MOON</title> 
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> 
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() {
    $('.centermoon').cycle({
        fx: 'fade',
        timeout: 1000,
        speed:  500,
        cleartypeNoBg: true,
        nowrap:  1
    });
});
</script> 
<script type="text/javascript"> 
$(document).ready(function() {
    $('.moonpieces').cycle({
        fx: 'curtainX',
        timeout: 1100,
        speed:  1500,
        cleartypeNoBg: true,
        nowrap:  1
    });
});
</script> 
<script type="text/javascript"> 
$(document).ready(function() {
    $('.fadenav').cycle({
        fx: 'curtainX',
        timeout: 1500,
        speed:  500,
        cleartypeNoBg: true,
        nowrap:  1
    });
});
</script> 
<script type="text/javascript">
$(document).ready(function(){   
    $('#navfade').fadeIn(2000);
});
</script>




</head> 
<body> 
<div id="wrapper">
<div id="logo">

</div>


<div id="headwrap">
<div id="moonwrap">
    <div class="centermoon"> 
        <img src="http://daveywhitney.com/moons/img/spacer.png"  /> 
        <img src="http://daveywhitney.com/moons/img/centermoon.png"  /> 
    </div> 

    <div class="moonpieces">
        <img src="http://daveywhitney.com/moons/img/spacer.png"  />
        <img src="http://daveywhitney.com/moons/img/sliced/moonpiece1.png" />
    </div>
    <div class="moonpieces">
        <img src="http://daveywhitney.com/moons/img/spacer.png"  />
        <img src="http://daveywhitney.com/moons/img/sliced/moonpiece2.png" />
    </div>
    <div class="moonpieces">
        <img src="http://daveywhitney.com/moons/img/spacer.png"  />
        <img src="http://daveywhitney.com/moons/img/sliced/moonpiece3.png" />
    </div>
    <div class="moonpieces">
        <img src="http://daveywhitney.com/moons/img/spacer.png"  />
        <img src="http://daveywhitney.com/moons/img/sliced/moonpiece4.png" />
    </div>
    <div class="moonpieces">
        <img src="http://daveywhitney.com/moons/img/spacer.png"  />
        <img src="http://daveywhitney.com/moons/img/sliced/moonpiece5.png" />
    </div>
    <div class="moonpieces">
        <img src="http://daveywhitney.com/moons/img/spacer.png"  />
        <img src="http://daveywhitney.com/moons/img/sliced/moonpiece6.png" />
    </div>

</div>
<div id="navfade" style="display:none;">


<ul id="nav">

<li><a class="cntct"href="#">Contact Us</a></li>
<li><a href="#" class="gal">Gallery</a></li>
<li><a href="#" class="prods" >Production Services</a></li>
<li><a href="#" class="home">Home</a></li>


<li><a href="#" class="mktng">Marketing Services</a></li>
<li><a href="#" class="clist">Client List</a></li>
<li><a href="#" class="clogin">Client Login</a></li>

</ul>
</div>

</div>
</div>
</body> 
</html>

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* END RESET - BEGIN LAYOUT */

html {
    background-image:url('http://daveywhitney.com/moons/img/bg.jpg');
}

#logo {
    width:700px;
    height:136px;
    margin:0 auto;
}

#wrapper {
width:1020px;
margin:0 auto;
}

#moonwrap {
    width:1020px;
    height:455px;
    margin:0 atuo;

}
.moonpieces {
    width:1019px;
    height:455px;
    position: absolute;
    z-index: -1;
}

.centermoon {
    width:1019px;
    height:455px;
    position: absolute;
}

#nav {
width:1020px;
margin:40px 0 0 0;
padding:0; 
}
#nav li {
display:inline;
padding:0;
color:#fff;
}

#nav li a {
    color:#777;
}




.gal {
margin:0 0 0 40px;
}

.prods {
margin:0 0 0 60px;
}

.home {
margin:0 0 0 140px;
}

.mktng {
    margin:0 0 0 150px;
}

.clist {
    margin: 0 0 0 40px;
}

.clogin {
    margin: 0 0 0 40px;
}






a #headwrap:hover {
    background-position: -150px 0;
    color:#fff;
}

Answer 1

You can use:

.className {
    -moz-box-shadow: 1px 1px 5px #fff;
    -webkit-box-shadow: 1px 1px 5px #fff;
    box-shadow: 1px 1px 5px #fff;
}

JSFiddle

jquery animation with rollover

Question

1 answers

solution1
1 2011-02-08 23:19:33

jquery animation with rollover

Question

1 answers

solution1 1 2011-02-08 23:19:33

solution1
1 2011-02-08 23:19:33