I have a html structure that needs to animate on click. I have written the first half to achieve this but am unsure how to reverse these steps when the event handler is clicked again.
Code so far http://jsfiddle.net/aYfUH/
Also, is stacking the animate method like this the best way to achieve steps of an animation?
在jQuery中检查toggle()
方法: http : //api.jquery.com/toggle/
I thing this is what you need
Some css change
.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');
});
Well, this is how I solved it in the end...
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
})
};
});
}
I know I'm late to the party but for new comers here's a little jQuery plugin that I made a while ago that brings support for reverse animations:
https://github.com/ZiadJ/jquery.reversible
I've successfully used it on several projects up to now. Hope this helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.