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>
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
