hi! I'm not a progammer though I can read written code and understand it. I found a couple of scripts and manipulated them to accomplish what I want but am at a loss to finish my effect and need help.

my inspiration comes from the WM Mango phone OS where unselected menu buttons will resize and undulate when you select a button to move. on my site I've created an undulating menu of blocks that individually expand in size when moused-over.

the problem is both functions to resize the blocks and make them undulate manipulate the CSS variables "top" and "left" so if you resize a block while it is undulating, the resize effect looks very weird (because the constant position updating conflicts with each other). I have managed to successfully stop the undulate function on :HOVER by including
Code:
clearInterval(xxx);
in the expand function but the problem is all the blocks stop undulating.

I need to stop the undulating function for the block that :HOVER is applied and then restart undulating when the mouse is removed but AFTER the .animate() has finished for the resize back to normal.

I don't know if I can add something to my existing code or if I need to completely rewrite to make it work. I do plan on rewriting the code to reduce the size of the undulating function.

Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {

  $(".div1").hover(
    function() {
	clearInterval(elled);
      $(this).animate({
	  opacity: "1",
        height: "+=90",
		width: "+=90",
		top: "-=45",
		left: "-=45" //adds 250px
        }, 'slow' //sets animation speed to slow
      );
	  this.style.zIndex = 50;

    },
    //on mouseout
    function() {
      $(this).animate({
	  opacity: ".5",
        height: "-=90px",
		width: "-=90px",
		top: "+=45",
		left: "+=45"
        }, 'slow'
      );
	  this.style.zIndex = 10;
    }
  );

});
</script> 

<style type="text/css">
.div1{
	position:absolute;
    height:80px;
	width:80px;
	opacity:.5;
	filter:alpha(opacity=50);
	z-index:1;
    overflow:hidden;
    background: red; /* just for demo */
	margin: 0 auto;
}
</style>

<body>
<div class="1 div1" id="test">This is div 1</div>
<div class="2 div1" id="test2">This is div 2</div>
<div class="3 div1" id="test3">This is div 3</div>
<div class="4 div1" id="test4">This is div 4</div>
<div class="5 div1" id="test5">This is div 5</div>
<div class="6 div1" id="test6">This is div 6</div>
<div class="7 div1" id="test7">This is div 7</div>
<div class="8 div1" id="test8">This is div 8</div>
<script>
var banner = document.getElementById("test");
var banner2 = document.getElementById("test2");
var banner3 = document.getElementById("test3");
var banner4 = document.getElementById("test4");
var banner5 = document.getElementById("test5");
var banner6 = document.getElementById("test6");
var banner7 = document.getElementById("test7");
var banner8 = document.getElementById("test8");
    start = 0;
	again = 0;
function sine(){
  banner.style.top = 10 * Math.sin( start ) + 80 + 'px';
  banner.style.left = 3 * Math.sin( again ) + 80 + 'px';
  banner2.style.top = 10 * Math.sin( start - 1 ) + 80 + 'px';
  banner2.style.left = 3 * Math.sin( again - 1 ) + 170 + 'px';
  banner3.style.top = 7 * Math.sin( start + .5 ) + 170 + 'px';
  banner3.style.left = 2 * Math.sin( again ) + 80 + 'px';
  banner4.style.top = 7 * Math.sin( start - 1.5 ) + 170 + 'px';
  banner4.style.left = 2 * Math.sin( again - 1 ) + 170 + 'px';
  banner5.style.top = 4 * Math.sin( start + .75) + 260 + 'px';
  banner5.style.left = 3 * Math.sin( again ) + 80 + 'px';
  banner6.style.top = 4 * Math.sin( start - 1.75 ) + 260 + 'px';
  banner6.style.left = 3 * Math.sin( again - 1 ) + 170 + 'px';
  banner7.style.top = 2 * Math.sin( start + .5 ) + 350 + 'px';
  banner7.style.left = 3 * Math.sin( again ) + 80 + 'px';
  banner8.style.top = 2 * Math.sin( start - 1.5 ) + 350 + 'px';
  banner8.style.left = 3 * Math.sin( again - 1 ) + 170 + 'px';
  start += 0.05;
  again += .1;
}
var elled = window.setInterval( sine, 1000/26 );
</script>
</body>