I am trying to get a simple effect working in jQuery, and only have a few hours of experience with it, so have a lot to learn.
I managed to get this code working:
<script type="text/javascript" >
$(document).ready(function() {
lastBlock = $("#a1");
maxWidth = 415;
minWidth = 75;
$("ul li a").hover(function() {
$(lastBlock).animate({ width: minWidth + "px" }, {
queue: false,
duration: 600
});
$(this).animate({ width: maxWidth + "px" }, {
queue: false,
duration: 600
});
lastBlock = this;
});
});
</script>
Which gives me exactly what I want, a 6 pane horizontal accordion effect. Each pane however has a 75x75 image on the upper left, which is always visible no matter which pane is active (and it is this image that when hovered over caused the pane to open) - what I want to do is for the image on the selected 'pane', I want to drop the top margin down 10px, and then put it back to 0px when a new one is selected, i.e. so the selected panes image is always 10px lower than the other 5 images.
I suspect this should be easy, but not quite grasping the syntax yet.
Thanks.
