I am having trouble with the .animate function in jQuery, so I want to resize a div without using it.
My goal is to enlarge boxes using CSS. I have 4 boxes positioned next to each other, and when one of them is clicked, it should expand while the others move off the screen (possibly those on the left go left and those on the right go right). The boxes are contained within a rectangle that should also enlarge along with the boxes.
I believe I can achieve this by creating a new class in CSS (.thumb:click), but I'm unsure how to use Javascript/HTML to execute the enlargement and pushing off-screen effect.
Here is the HTML code:
<div class="portItem">
<div class="itemContent-wrap">
<div class="itemContent">
<div class="container">
<div class="thumbWrap">
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
</div>
</div>
</div>
</div>
</div>
CSS styles:
.itemContent-wrap {
display: inline-block;
width: 100%;
height: auto;
margin-bottom: 10px;
}
.itemContent {
height: 250px;
width: auto;
position: static;
display: block;
background: #ffffff;
box-shadow: 1px 0px 20px black;
margin-bottom: 10px;
margin-left:-12.5%;
margin-right:-12.5%;
overflow-y: hidden;
}
.container {
width: 110%;
margin: 0 auto;
background: transparent;
position: relative;
}
.thumbWrap {
height: 220px;
white-space: nowrap;
width: 2000px;
}
.thumb {
height: 200px;
width: 450px;
position: relative;
display: inline-block;
background: #D0E182;
margin-top: 25px;
margin-right: 5px;
}
// Proposed solution...
.thumb:click {
}
Javascript code (trying to avoid using .animate)
$(document).ready(function(){
$('.thumb').click(function()
{
$('.itemContent').css("cursor","pointer");
$('.itemContent').animate({height: "500px"}, 'slow');
$(this).animate({width: "900px",height:"400px"}, 'slow');
});
$('.thumb').mouseout(function()
{
$('.itemContent').animate({height: "250px"}, 'slow');
$(this).animate({width: "450px",height:"200px"}, 'slow');
});
});
Link to JSFiddle for reference: http://jsfiddle.net/g4GFb/
Thank you in advance for your assistance!