The example in jsfiddle works fine. But on my page the overlay appears in the bottom - right, out view instead of the centre. Can anyone tell me which sections I need to change to position overlay in the centre? I've tried bootstrap overlay but this conflicts with current js version, so I thought this solution would be better, that I found on jsfiddle. I have not tested it as a responsive feature on mobile etc, but would be good if someone spots anything which might break on mobile and tablet, other os. Thanks this is the fiddle link and code below http://jsfiddle.net/istvanv/uQj7t/28/
css
a#overlaylaunch-inAbox {
display: block;
padding: 40px;
margin: 40px;
background-color: #efefef;
font-size: 1.6em;
text-decoration: none;
text-align: center;
}
#overlay-inAbox .wrapper {
text-align: center;
}
/* More important stuff */
.overlay,
#overlay-shade {
display: none;
}
#overlay-shade {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 9999;
background-color: #000;
}
.overlay {
position: absolute;
top: 500px;
left: 0;
width: 450px;
min-height: 500px;
z-index: 100;
background-color: #7D7D7D;
border: 10px solid #CFCFCF;
color: #fff;
box-shadow: 0 0 16px #000;
} .ie7 .overlay {
height: 200px;
} .overlay .wrapper {
padding: 15px 30px 30px;
}
.overlay .toolbar {
padding: 8px;
line-height: 1;
text-align: right;
overflow: hidden;
} .overlay .toolbar a.close {
display: inline-block;
*display: inline;
zoom: 1;
padding: 0 8px;
font-size: 12px;
text-decoration: none;
font-weight: bold;
line-height: 18px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
color: #999999;
background-color: #515151;
} .overlay .toolbar a.close span {
color: #818181;
} .overlay .toolbar a.close:hover,
.overlay .toolbar a.close:hover span {
background-color: #b90900;
color: #fff;
}
js
function openOverlay(olEl) {
$oLay = $(olEl);
if ($('#overlay-shade').length == 0)
$('body').prepend('<div id="overlay-shade"></div>');
$('#overlay-shade').fadeTo(300, 0.6, function() {
var props = {
oLayWidth : $oLay.width(),
scrTop : $(window).scrollTop(),
viewPortWidth : $(window).width()
};
var leftPos = (props.viewPortWidth - props.oLayWidth) / 2;
$oLay
.css({
display : 'block',
opacity : 0,
top : '-=300',
left : leftPos+'px'
})
.animate({
top : props.scrTop + 40,
opacity : 1
}, 600);
});
}
function closeOverlay() {
$('.overlay').animate({
top : '-=300',
opacity : 0
}, 400, function() {
$('#overlay-shade').fadeOut(300);
$(this).css('display','none');
});
}
$('#overlay-shade, .overlay a').live('click', function(e) {
closeOverlay();
if ($(this).attr('href') == '#') e.preventDefault();
});
// Usage
$('#overlaylaunch-inAbox').click(function(e) {
openOverlay('#overlay-inAbox');
e.preventDefault();
});
html
<div id="overlay-inAbox" class="overlay">
<div class="toolbar"><a class="close" href="#"><span>x</span> close</a></div>
<div class="wrapper">
Hello! I'm in a box.
</div>
Launch It!
You can play with transform that centers you all you want without taking care of its dimensions.
.overlay {
position: fixed;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%); /* ie9 */
-webkit-transform: translate(-50%, -50%); /* safari iOS - older androids */
transform: translate(-50%, -50%); /* all browsers */
}
And that's all. Apply it to all divs you need to center respect the parent. This box is fixed position so the parent is the body tag.
Note than you don't need javascript calculations, so you can remove them and apply only with css.
EDIT
As I said in the comments, look at this fiddle with 3 divs perfectly centered without know how are their dimensions. Note than there aren't nothing of javascript to make calculations.
http://jsfiddle.net/11oes0rf/
EDIT 2
To preserve the top animation as you have in the initial code, you must to specify in percents with the jquery. So the fiddle is this:
http://jsfiddle.net/uQj7t/1363/
And the code is this:
$oLay
.css({
display : 'block',
top : '-50%',
opacity : 0
})
.animate({
opacity : 1,
top: '50%'
}, 600);
And closer:
function closeOverlay() {
$('.overlay').animate({
top: '-50%',
opacity : 0
}, 400, function() {
$('#overlay-shade').fadeOut(300);
$(this).css('display','none');
});
}
Related
Hi I am trying to figure out how to display images when clicked on a section on my bar. So far I have a working animation to switch between sections but I would like to display images under it. It's my first time doing this so I absolutely don't know how to do this and would very much appreciate the help.
var indicator = document.querySelector('.stefan-indicator');
var items = document.querySelectorAll('.stefan-item');
function handleIndicator(el) {
items.forEach(function (item) {
item.classList.remove('is-active');
item.removeAttribute('style');
});
indicator.style.width = "".concat(el.offsetWidth, "px");
indicator.style.left = "".concat(el.offsetLeft, "px");
indicator.style.backgroundColor = el.getAttribute('active-color');
el.classList.add('is-active');
el.style.color = el.getAttribute('active-color');
}
items.forEach(function (item, index) {
item.addEventListener('click', function (e) {
handleIndicator(e.target);
});
item.classList.contains('is-active') && handleIndicator(item);
});
.stefan {
margin-top:4%;
display: inline-flex;
position: relative;
overflow: hidden;
max-width: 100%;
background-color: inherit;
padding: 0 20px;
border-radius: 40px;
/* box-shadow: 0 10px 40px rgba(159, 162, 177, .8); */
display: flex;
justify-content: center;
}
.stefan-item {
color: #252525;
padding: 20px;
text-decoration: none;
transition: 0.3s;
margin: 0 6px;
z-index: 1;
font-family: 'Open sans', sans-serif;
position: relative;
cursor: pointer;
font-weight: 500;
}
.stefan-item:before {
content: "";
position: absolute;
bottom: -6px;
left: 0;
width: 100%;
height: 5px;
background-color: #ffb833;
border-radius: 8px 8px 0 0;
opacity: 0;
transition: 0.3s;
}
.stefan-item:not(.is-active):hover:before {
opacity: 1;
bottom: 0;
}
.stefan-item:not(.is-active):hover {
color: #ffb833;
cursor: pointer;
}
.stefan-indicator {
position: absolute;
left: 0;
bottom: 0;
height: 4px;
transition: 0.4s;
height: 5px;
z-index: 1;
border-radius: 8px 8px 0 0;
}
<div class="stefan">
<a class="stefan-item is-active" active-color="#ffb833">Section1</a>
<a class="stefan-item" active-color="#ffb833">Section2</a>
<a class="stefan-item" active-color="#ffb833">Section3</a>
<a class="stefan-item" active-color="#ffb833">Section4</a>
<a class="stefan-item" active-color="#ffb833">Section5</a>
<span class="stefan-indicator"></span>
</div>
If what you are trying to do is build tabs component you need to create elements for every tab that are hidden by default and only are displayed when your code tells it to.
So when stefan-item with section1 content is clicked, your javascript should tell stefan-content-1 to change it's style to display:block (by directly changing style or adding class).
You can have a look here: https://web.dev/building-a-tabs-component/ or use a ready made component. Bootstrap, Material UI and other systems have tabs for the taking.
I have a circular mouse sprite that will show the inverse of a color during mouseover. I want to be able to use this to find black text (hidden within a black background) and make the black text visible as white if the circular mouse sprite is over the text.
It looks as follows:
Over text:
I want to make it so that when its over the text "FEELING LEFT IN THE DARK?", the text will appear white, but only within the cursor. For example, in the second image above, only the bottom part of "EL" should be visible as WHITE while the circular mouse sprite is over the text.
I wonder if this is even possible? and if so, help is appreciated.
HTML:
<h1 class="contact-intro">Feeling Left <br> in the dark?</h1>
<span class="cursor"></span>
CSS:
/*The text "Feeling left in the dark?*/
.contact-intro {
text-align: left;
justify-content: center;
margin: auto;
margin-left: 28.55%;
margin-top: 3%;
display: inline-block;
text-transform: uppercase;
color: black;
font-size: 7em;
z-index: 500;
}
/*The Cursor*/
#media ( hover: none ) {
.cursor {
display: none !important;
}
}
* {
cursor: none;
}
.cursor {
--size: 80px;
height: var( --size );
width: var( --size );
border-radius: 50%;
pointer-events: none;
position: absolute;
transform: translate( -50%, -50% );
z-index: 1;
}
.cursor.cursor-dot {
background: orangered; /* This defines the color of the cursor */
mix-blend-mode: difference;
transition: width 0.6s, height 0.6s, background-color 0.6s;
transition-timing-function: ease-out;
}
.cursor-dot.active {
--size: 50px;
background-color: #ffffff;
}
JQUERY:
//text inversion
$(() => {
$('body').prepend('<div class="cursor cursor-dot" style="left: 0px; top: 0px;">');
$(window).mousemove(function (e) {
$('.cursor').css({
left: e.pageX,
top: e.pageY
});
});
$(window).mousemove(function (e) {
$('a').on('mouseenter', function () {
$('.cursor').addClass('active');
});
});
$(window).mousemove(function (e) {
$('a').on('mouseleave', function () {
$('.cursor').removeClass('active');
});
});
});
This isn't exactly what you asked for, since the text color isn't inverted...but the black still shows up against the red cursor element as it moves around. Pretty simple to do with z-index.
const cur = document.querySelector('#cur');
const { width, height } = cur.getBoundingClientRect();
document.addEventListener('mousemove', e => {
cur.style.top = e.y - height / 2 + 'px';
cur.style.left = e.x - width / 2 + 'px';
});
html,
body {
height: 100%;
padding: 0;
margin: 0;
background-color: black;
}
#txt {
position: relative;
color: black;
background-color: transparent;
z-index: 300;
font-size: 3rem;
padding: 1rem;
}
#cur {
position: absolute;
width: 3rem;
height: 3rem;
border-radius: 1.5rem;
background-color: red;
z-index: 200;
}
<div id='txt'>FEELING LEFT IN THE DARK?</div>
<div id='cur'></div>
I am working with a navigation bar that has slides a menu from right to left.
With my code, when the user picture is being clicked, it will show the menu.
So when it is loaded, menu is hidden and when it is clicked will be showed. I used to add class hidden and show to toggle to menu.
$(document).ready(function(){
$(".img-profile").click(function(){
$(".menu-wrapper").addClass("show");
});
$(".menu-bg").click(function(){
$(".menu-wrapper").removeClass("show");
});
});
CSS
.show{
display: inline-block !important;
}
.hidden{
display: none;
}
The problem is it's not animating even if I added the transition: all 0.2s linear 0s and the transform from 250px to 0
.menu-wrapper > .login-menu{
background-color: #fff;
height: 100%;
overflow-y: auto;
position: fixed;
right: 0;
width: 250px;
z-index: 5;
padding: 30px 20px;
text-align: center;
transition: all 0.2s linear 0s;
transform: translateX(0px);
}
.menu-wrapper .show > .login-menu{
transform: translateX(250px);
}
Also, I want to animate it on menu-close from right to left.
My full code is at JSFIDDLE
Changing the display CSS attribute does not trigger animations. Use the visibility attribute instead. This one triggers animations.
If you have good reason to use display (which is completely possible), you'll need to set the display attribute first to show the element, but keep the visibility on hidden. Set the visibility: visible attribute right after and the animation will be triggered.
Edit: I had a look at your fiddle. Don't use the .hidden class, because bootstrap sets display:none on .hidden elements. Just use the .show class alone, putting visibility:visible in the show class, and setting visibility:hidden on the .menu-wrapper element. Remove all the display:none lines in your CSS and you'll be fine.
Try to do it with this trick.
<header class="header">
<div class="container">
<a class="logo" href="/"></a>
<div class="login">
<div class="img-profile" style="background-image: url('http://graph.facebook.com/4/picture?width=100&height=100')"></div>
<div class="login-menu">
<div class="img-profile" style="background-image: url('http://graph.facebook.com/4/picture?width=100&height=100')"></div>
<p>Mark Zuckerberg</p>
<button type="button" class="btn btn-danger btn-block">Logout</button>
</div>
<div class="menu-bg"></div>
</div>
</div>
.header{
width: 100%;
height: 50px;
background: #fff;
border-bottom: 2px solid #ececec;
}
.header > .container{
height: 100%;
position: relative;
}
.logo {
background: url("http://d12xrwn9fycdsl.cloudfront.net/static/images/sv_logo.png") no-repeat scroll center center / contain ;
display: inline-block;
width: 23rem;
height: 100%;
}
.select-lang {
display: inline-block;
position: absolute;
top: 15px;
}
.login{
position: absolute;
right: 0;
top: 0;
}
.img-profile{
background: no-repeat scroll center center / contain;
position: relative;
top: 3px;
border-radius: 40px;
width: 40px;
height: 40px;
display: block;
margin: auto;
}
.login > .menu-wrapper{
display: none;
position: fixed;
left: 0;
top: 0;
bottom: 0;
z-index: 5;
height: 100%;
width: 100%;
}
.login-menu{
background-color: #fff;
height: 100%;
overflow-y: auto;
position: fixed;
top: 40px;
right: -250px;
width: 250px;
z-index: 5;
padding: 30px 20px;
text-align: center;
transition: all 0.2s linear 0s;
}
.show{
right: 0;
}
.hidden{
right: -250px;
}
.login-menu > .img-profile {
border-radius: 70px;
height: 70px;
width: 70px;
}
.login-menu > p {
font-weight: bold;
margin: 10px 0 20px;
}
.menu-wrapper > .menu-bg{
background-color: rgba(0, 0, 0, 0.6);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
$(document).ready(function(){
$(".img-profile").click(function(){
$(".login-menu").addClass("show");
});
$(".img-profile").click(function(){
$("body").removeClass("show");
});
});
Take a look here https://jsfiddle.net/SkiWether/KFmLv/
this is working for me
$(".myButton").click(function () {
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
var options = { direction: $('.mySelect').val() };
// Set the duration (default: 400 milliseconds)
var duration = 500;
$('#myDiv').toggle(effect, options, duration);
});
I've been using a jQuery scroll to enhance my parallax scrolling page. Specifically, this one. JQuery Scroll to Next Section
I am completely new to jQuery, (and have only used some fairly basic JavaScript in the past). I can work out how to change and adapt code found to my needs, but I don't know how to slow the scroller down.
The problem, is that to accommodate all of the content in my page, it needs to be about 17000px high. I only want the scroller to scroll to the bottom of the page then back to the top (without any stops inbetween), but when clicked it currently takes about 1 second to scroll 17000px. This means you can't read any of the text displayed. I want the scrolling animation to max out at about 1000px per second. How would I do this?
HTML
<div class="background fixed"></div>
<div class="trigger-scroll">></div>
<!-- Sections Id'd 1 through 5 -->
<section id="slide-6" class="homeSlide">
<div class="bcg center fixed"
data-0="top:200%; opacity:0;"
data-16000="top:200%; opacity:1;"
data-17000="top:90%;"
data-end="top:90%;">
<div class="hsContainer">
<div class="center middle">
<h2>View my portfolio!</h2>
<img class="portfolio" src="img/r3gamersHome.png"/>
</div>
</div>
</div>
</section>
<section id="slide-7" class="homeSlide scroll-here">
<div class="hsContainer">
<div class="hsContent bottom"
>
<h3>TEST</h3>
</div>
</div>
</section>
Javascript
( function( $ ) {
// Setup variables
$window = $(window);
$slide = $('.homeSlide');
$body = $('body');
//FadeIn all sections
$body.imagesLoaded( function() {
setTimeout(function() {
// Resize sections
adjustWindow();
// Fade in sections
$body.removeClass('loading').addClass('loaded');
}, 800);
});
function adjustWindow(){
// Init Skrollr
// Get window size
winH = $window.height();
// Keep minimum height 550
if(winH <= 550) {
winH = 2900;
}
// Resize our slides
$slide.height(winH);
// Refresh Skrollr after resizing our sections
}
} )( jQuery );
var s = skrollr.init();
s.refresh($('.homeSlide'));
$(document).ready(function() {
/* run scroll to section only
if body has class page-scroller */
var pageScroller = $( 'body' ).hasClass( 'page-scroller' );
if ( pageScroller ) {
// begin homepage scroll to section
var $scrollSection = $('.scroll-here');
var $scrollTrigger = $('.trigger-scroll');
var nextSection = 0;
$scrollTrigger.on( 'click', function() {
$(this).removeClass('go-to-top');
// If at last section, scroll back to top on next click:
if (nextSection >= $scrollSection.length) {
$('html, body').animate({ scrollTop: 0 }, 1000);
nextSection = 0;
return;
}
// If already scrolled down
// to find next section position so you don't go backwards:
while ( $('body').scrollTop() > $($scrollSection[nextSection]).offset().top ) {
nextSection++;
}
// If next section is the last, add class to rotate arrow:
if (nextSection === ($scrollSection.length - 1)) {
$(this).addClass('go-to-top');
}
// Move to next section and increment counter check:
$( 'html, body' ).animate({ scrollTop: $($scrollSection[nextSection]).offset().top }, 1000);
nextSection++;
});
// end homepage scroll to section
}else{
console.log('page-scroller class was not found in body tag');
}//end if else
});
CSS (probably isn't relevant so i've added only the bare minimum, just in case)
.bcg {
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
height: 100%;
width: 100%;
}
.hsContainer {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.hsContent {
max-width: 700px;
position: absolute;
}
.hsContent h2 {
color: #fff8de;
padding: 10px 5px;
font-size: 30px;
}
#media screen and (max-height: 400px) {
.hsContent h2 {
font-size: 25px;
}
}
.hsContent h3 {
color: #fff8de;
padding: 10px 5px;
line-height: 20px;
margin-bottom: 5px;
}
#media screen and (max-height: 400px) {
.hsContent h3 {
font-size: 15px;
padding: 5px 2.5px;
margin-bottom: 2px;
}
}
.hsContent h4 {
color: #fff8de;
padding: 10px 5px;
line-height: 15px;
margin-bottom: 5px;
}
#media screen and (max-height: 400px) {
.hsContent h4 {
font-size: 10px;
}
}
.hsContent p {
width: 400px;
color: #b2b2b2;
}
.hsContent a {
color: #b2b2b2;
text-decoration: underline;
}
.fixed {
position: fixed;
}
.center{
top:0;
bottom:0;
left:0;
right:0;
margin: auto;
}
.middle {
text-align: center;
margin: 0px;
padding-top: 40px;
width: 100%;
min-width: 300px;
}
#media screen and (max-height: 400px) {
.middle {
padding-top: 15px;
}
}
#slide-6 .bcg {background-color: rgb(208, 208, 208);
top: 100%;
box-shadow: inset 5px 5px 20px black;
}
#slide-6 .hsContent {
top: 0px;
text-align: center;
}
#slide-7 .hsContent {
max-height: 100px;
}
.trigger-scroll {
box-sizing: border-box;
display: inline-block;
border: 1px #f60 solid;
bottom: 20px;
width: 68px;
height: 68px;
position: fixed;
right: 20px;
padding: 16px 20px;
transition: transform 500ms ease-in-out;
z-index: 50;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
font-weight: 700;
text-shadow: 0 1px 0 #fff;
color: #fff;
font-family: verdana;
font-size: 2em;
line-height: 1;
cursor: pointer;
border-radius: 3px;
opacity: 0.8;
box-shadow: 1px 0px 1px 1px rgba(102,51,0, .25);
}
#media screen and (max-height: 400px) {
.trigger-scroll {
width: 51px;
height: 51px;
font-size: 1.5em;
padding: 12px 15px;
}
}
.trigger-scroll:hover { background: #f60; border-color: #c30; }
.trigger-scroll.go-to-top {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
In this section's third line, change 1000:
// If at last section, scroll back to top on next click:
if (nextSection >= $scrollSection.length) {
$('html, body').animate({ scrollTop: 0 }, 1000);
nextSection = 0;
return;
}
to $(document).height(), like this:
$('html, body').animate({ scrollTop: 0 }, $(document).height());
this will make the animation scroll at about 1000 pixels per second.
I have the following code:
HTML CODE:
<table border=0 cellpadding=0 cellspacing=0 width=250px bgcolor=#FF0000>
<tr>
<td align=right><span id=spnMain></span>
</td>
</tr>
</table>
CSS CODE:
#spnMain {
background: url("theImages/searchButton.png") no-repeat;
background-position: 0px 0px;
width: 28px;
display: block;
height: 28px;
cursor: pointer;
}
#spnMain span {
background: url("theImages/searchButton.png");
display: block;
height: 50px;
background-position: 0px -56px;
}
JS CODE:
$(document).ready(function () {
$("#spnMain").wrapInner("<span></span>");
$("#spnMain span").css({
"opacity": 0
});
$("#spnMain").hover(function () {
$(this).children("span").animate({
"opacity": 1
}, 400);
}, function () {
$(this).children("span").animate({
"opacity": 0
}, 400);
});
});
Produces the following (the top is onload and the bottom when mouse is hovered:
How can I make the green button fade in on top of the purple button so it hides it?
I know you ask for a javascript solution but you can do the same thing with css only (if you want to)
Way 1, sprites, no animation though: http://jsfiddle.net/NicoO/WBjS5/
Way 2, two images, css transition (a bit hacky): http://jsfiddle.net/NicoO/WBjS5/6/
#spnMain
{
display: block;
height: 28px;
width: 28px;
background-image: url(**url to green button image**);
background-position: 0% 0%;
position: relative;
}
#spnMain:after
{
position: absolute;
width: inherit;
height: inherit;
top: 0;
left: 0;
content:"";
transition-duration: 0.4s;
visibility: hidden;
opacity: 0;
background-image: url(**url to red button image**);
}
#spnMain:hover:after
{
visibility: visible;
opacity: 1;
}
Update the visibility property helps for IE8 support- no transition will occur, but the image will be swapped on mouse over. What should be good enough of a fallback for old "browsers".
#spnMain {
position: relative;
/* ... same as before ... */
}
#spnMain span {
position: absolute;
top: 0;
right: 0;
/* ... same as before */
}
And your answer is:
Fiddle link: http://jsfiddle.net/LNQq3/4/
CSS Code:
#spnMain {
background: url("http://s18.postimg.org/balg05zj9/gogo.gif?noCache=1393616120") no-repeat;
background-position: 0px -5px;
width: 28px;
display: block;
height: 28px;
cursor: pointer;
}
#spnMain:hover {
background-position: -37px -5px;
}
Have you tried using an absolute positioned element within a relative positioned element (http://css-tricks.com/absolute-positioning-inside-relative-positioning/)?
I have put together a quick jsfiddle demonstrating this: http://jsfiddle.net/9xENQ/
I just grabbed a quick GO/STOP image sprite and didn't take the time to really look into the necessary background-position to make it line up perfectly. Just wanted to convey the concept.
The HTML:
<div class="button-container">
Hi here is a bunch of text with a padding right to keep it from bleeding into the image.
<span id="spnMain"></span>
</div>
The CSS:
.button-container {
position: relative;
padding-right: 160px;
width: 158px;
height: 163px;
border: 1px solid black;
}
#spnMain {
background: url("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ2m3WvngUNXOeQ4oItfopBO5VSA3OP7hhaHsjMrwHLlzYR4KeZPA") no-repeat;
background-position: 0px 0px;
width: 158px;
display: block;
height: 163px;
cursor: pointer;
position: absolute;
top: 0;
left: 100%;
margin-left: -158px;
}
#spnMain span {
background: url("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ2m3WvngUNXOeQ4oItfopBO5VSA3OP7hhaHsjMrwHLlzYR4KeZPA");
display: block;
width: 158px;
height: 163px;
background-position: -158px 0px;
position: absolute;
left: 100%;
top: 0;
margin-left: -158px;
}
Your JavaScript (as is):
$(document).ready(function() {
$("#spnMain").wrapInner("<span></span>");
$("#spnMain span").css({"opacity" : 0});
$("#spnMain").hover(function(){
$(this).children("span").animate({"opacity" : 1}, 400);
}, function(){
$(this).children("span").animate({"opacity" : 0}, 400);
});
});