0

今天我正在修复顶部按钮以移动隐藏的图像。我想在另一个下放一个空锚。用于 javascript 的锚点，并为隐藏的图像设置动画。

这是 jsfiddle http://jsfiddle.net/JohnnyDevv/TR4ps/4/

这里是 html、javascript 和 css，所以你可以更好地理解。

HTML

<div id="hidden-cartoons">
    <img src="https://lh6.googleusercontent.com/-aEPxXvvzbgE/UJesTFlawfI/AAAAAAAAAz4/iYJpZwkkZ20/s228/velejador.png" class="cartoon velejador">
    <img src="https://lh3.googleusercontent.com/-SdWM2VqioyI/UJesVjjZ6WI/AAAAAAAAA0A/vStlRdYcEWA/s338/bodoleite.png" class="cartoon bodoleite">
</div>    
<div id="cartoons-buttons">
    <a href="javascript:void(0)" class="left" id="velejador"></a>
    <a href="javascript:void(0)" onclick="doSomething();" class="right"></a>
    <a href="javascript:void(0)" class="left" id="bodoleite"></a>
    <a href="javascript:void(0)" onclick="doSomething();" class="right"></a>
</div>​

CSS

#hidden-cartoons {
    position:absolute;
    z-index:-99;
}

.cartoon {
    width:40px;
    position:absolute;
}
.cartoon.velejador {
    margin-top:10px;
    z-index:-99;
}

.cartoon.bodoleite {
    margin-top:60px;
    z-index:-99;
}   
#cartoons-buttons {
        width:320px;
        height:520px;
        position:absolute;
        z-index:100;
    } 
    .left {
        padding:20px;
        cursor:pointer;
        margin-right: 120px;
    }
    .right {
        padding:20px;
        cursor:pointer;
        margin-left: 120px;
    }
    #velejador {
        background-color:#00ff00;
    }
    #bodoleite {
        margin-top: 80px;
        background-color:#ff0000;
    }​

Javascript

$(文档).ready(函数() {

$('#velejador').mouseover(function() {
    $('.velejador').stop().animate({
        left: '+50',
        width: '40px'
    }, 1000);
}).mouseout(function() {
    $('.velejador').stop().animate({
        left: '0',
        width: '40px'
    }, 1000);
});
$('#bodoleite').mouseover(function() {
    $('.bodoleite').stop().animate({
        left: '+50',
        width: '40px'
    }, 1000);
}).mouseout(function() {
    $('.bodoleite').stop().animate({
        left: '0',
        width: '40px'
    }, 1000);
}); });​
4

1 回答 1

2

CSS 中的类之间没有空格。

.cartoon .bodoleite {
margin-top:60px;
z-index:-99;
}

更新：http: //jsfiddle.net/TR4ps/32/

不确定那些 .left 和 .right div 的意义是什么。您需要绝对定位锚点并给它们一个高度和一个宽度。我认为至少这是你所追求的。

#hidden-cartoons {
position:absolute;
z-index:-99;
}

.cartoon {
width:40px;
position:absolute;
}
.cartoon.velejador {
margin-top:0px;
z-index:-99;
}

.cartoon.bodoleite {
margin-top:60px;
z-index:-99;
}   
#cartoons-buttons {
width:320px;
height:520px;
position:absolute;
z-index:100;
} 
#velejador {
position:absolute;
height:60px;
width:40px;
background-color:#00ff00;
float:left;
}
#bodoleite {
position:absolute;
background-color:#ff0000;
float:left;
height:100px;
width:40px;
top:60px;
}    ​
于 2012-11-05T12:29:16.073 回答