我有一个 html 结构,需要在点击时进行动画处理。我已经编写了前半部分来实现这一点,但我不确定当再次单击事件处理程序时如何反转这些步骤。
到目前为止的代码http://jsfiddle.net/aYfUH/
另外,像这样堆叠动画方法是实现动画步骤的最佳方法吗?
我有一个 html 结构,需要在点击时进行动画处理。我已经编写了前半部分来实现这一点,但我不确定当再次单击事件处理程序时如何反转这些步骤。
到目前为止的代码http://jsfiddle.net/aYfUH/
另外,像这样堆叠动画方法是实现动画步骤的最佳方法吗?
查看toggle()
jQuery 中的方法:http: //api.jquery.com/toggle/
嗯,这就是我最终解决它的方法......
function ()
{
$ticker = $('.ticker');
$tickerFull = $ticker.find('.full');
$tickerMiniExpand = $ticker.find('.expand');
$tickerMini = $ticker.find('.mini');
$tickerMiniExpand.on('click', function(e)
{
if ($('.expand.closed').length)
{
$(this).removeClass('closed');
$(this).addClass('open');
e.preventDefault();
$ticker.animate(
{
top: -30
}, 150, function()
{
$ticker.animate(
{
'z-index': 1000,
}, 0, function()
{
$ticker.animate(
{
top: 0,
height: 331
}, 0, function()
{
$tickerFull.animate(
{
top: 0
},
{
duration:350
});
$tickerMini.animate(
{
top: 279
},
{
duration:350
});
}); // 2nd animate
}); // 1st animate
}); // click
} else {
$(this).removeClass('open');
$(this).addClass('closed');
e.preventDefault();
$tickerMini.animate(
{
top: 0
},
{
duration:200, queue: false
});
$tickerFull.animate(
{
top: -279
},
{
duration:200, queue: false
});
$ticker.animate(
{
top: -30,
height: 52
},
{
duration:350, queue: true
})
.animate(
{
'z-index': 0,
},
{
duration:0, queue: true
})
.animate(
{
top: 0
},
{
duration:200
})
};
});
}
我知道我迟到了,但是对于新来的人,这里有一个我不久前制作的小 jQuery 插件,它支持反向动画:
https://github.com/ZiadJ/jquery.reversible
到目前为止,我已经在几个项目中成功使用了它。希望这可以帮助。
我觉得这就是你需要的
一些CSS更改
.ticker-holder {
position:relative;
height:52px;
}
.ticker-holder .ticker {
width:100%;
float:left;
top:0px;
z-index:0;
overflow:hidden;
}
.ticker .full {
height:250px;
width:960px;
padding:10px 10px 0px 10px;
background-color:blue;
display:none;
}
.ticker-holder .ticker .mini {
height:30px;
width:980px;
background-color:#000000;
}
Javascript
$('.expand').on('click', function(e) {
e.preventDefault();
$ticker = $('.ticker');
$tickerFull = $ticker.find('.full');
$tickerMini = $ticker.find('.mini');
$tickerFull.slideToggle('slow');
});