Is it possible to animate the re-sizing of a frame in html?
I have a webpage where there a are two frames horizontally stacked (say 500px, remaining). Upon click of a 'minimize' image, the frame to the left is shrunk to around 100px. Is it possible to animate this shrinking via jquery/javascript/css?
Is it possible to animate the re-sizing of a frame in html?
I have a webpage where there a are two frames horizontally stacked (say 500px, remaining). Upon click of a 'minimize' image, the frame to the left is shrunk to around 100px. Is it possible to animate this shrinking via jquery/javascript/css?
Share Improve this question asked Jul 8, 2012 at 7:54 PlaymakerPlaymaker 1,4561 gold badge14 silver badges23 bronze badges 03 Answers
Reset to default 3If you are seeking to animate inner frames then I would go with Dr Molle's answer. If, however you are seeking to animate a frameset, you will have to do it manually. The example below illustrates. To examine it, you 'd better use a local web server to avoid problems with cross - domain restrictions (at least in Chrome, haven't tested it anywhere else...).
frame1.html
<html>
<body>
frame 1
<br />
<a href='#' class='minimize'>Minimize</a>
<script type="text/javascript"
src="http://code.jquery./jquery-latest.min.js"></script>
<script type='text/javascript'>
$(function () {
$('.minimize').click(function (evt) {
evt.preventDefault();
window.parent.minimize();
return false;
});
});
</script>
</body>
</html>
frame2.html
<html><body>frame 2</body></html>
frameset.html
<html>
<head>
<script type="text/javascript" src="http://code.jquery./jquery-latest.min.js"></script>
<script type='text/javascript'>
$(function () {
var minimizeInterval = null;
var current = 500;
var pace = 15;
var stop = 100;
window.minimize = function () {
minimizeInterval = setInterval(function () {
console.log('minimizing...');
$('frameset').attr('cols', current + ',*');
current -= pace;
if (current < stop)
clearInterval(minimizeInterval);
}, 10);
};
});
</script>
</head>
<frameset cols="500,*">
<frame id='frame1' src="frame1.html"></frame>
<frame id='frame2' src="frame2.html"></frame>
</frameset>
</html>
Use jQuery's animate:
$('#frameselector').animate({width:100});
Yes, you can animate most css properties.
Here's a sample : when you click on the left frame the right one is animated and reduces in size.
This is done using :
$('#a').click(function(){
$('#b').animate({
height: '50px'
}, 5000);
});
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745474371a4629277.html
评论列表（0条）