0

我一直在尝试为另一个 div（面板）中的 div（按钮）设置动画，但是我没有从这段代码中得到任何结果——我对 jquery 和网页设计都很陌生，所以请指出我是否犯了任何愚蠢的错误！

jQuery：

$(document).ready(function()
{
  $(".panel").mouseenter(function()
  {
    $(this).next('.button').animate({top:'20px',opacity:'1'},200);
  });
  $(".panel").mouseleave(function()
  {
    $(this).next('.button').animate({top:'50px',opacity:'0.9'},100);
    $(this).next('.button').animate({top:'-50px',opacity:'0.2'},200); 
  });
});

CSS：

.panel
{
position:relative;
overflow:hidden;
left:10px;
top:10px;
width:auto;
height:155px;
display:inline-block;
background: -webkit-gradient(linear, left top, left bottom, color-stop(100%,rgba(100,100,100,0.6)), color-stop(0%,rgba(0,0,0,0.8)));
border:1px solid rgba(0, 0, 0, 0.8);
border-radius:11px;

padding:0px 14px;
margin:5px;
}

.button
{
position:absolute;
left:-1px;
top:20px;
margin:0px auto;
width:100%;
height:35px;
display:block;
background: rgba(0,0,0,0.6);
border:1px solid rgba(0, 0, 0, 1);

padding:0px;
color:rgba(255,255,255,0.7);

text-align:center;
text-shadow: 1px 1px rgba(0,0,0,0.9);
font-family: 'Abril Fatface', cursive;
font-size: 20px;
}

我错过了什么？我需要做什么？

4

2 回答 2

1

正如你所说：我一直试图在另一个 div （面板）中为一个 div （按钮）设置动画

使用.find()而不是.next()

$(this).find('.button').animate({top:'20px',opacity:'1'},200);
于 2013-05-25T17:22:21.450 回答
0

你也可以使用

$(this).children('.button').animate({top:'20px',opacity:1},200);
于 2013-05-26T12:30:44.550 回答