animation
animation
I used JQuery animation to enlarge a picture. the only issue is that I
have multiple pictures, whenever i move mouse over one picture, if the
enlarged picture is too big then it goes under the nearby picture
instead of over the nearby picture. what I want is that the enlarged
picture cover/hide the nearby pictures.
I listed my code below, thanks.
<ui:define name="body">
<style type="text/css">
.pic-normal {
width: 120px;
border: 2px solid #ACBECE;
}
.wrap1 {
width:190px;
height: 130px;
float: left;
}
</style>
<br/>
<a4j:outputPanel id="gallery">
<h:graphicImage value="/images/pic1.jpg" />
<h:graphicImage value="/images/pic2.jpg" />
<h:graphicImage value="/images/pic3.jpg" />
<h:graphicImage value="/images/pic4.jpg" />
<h:graphicImage value="/images/pic5.jpg" />
<h:graphicImage value="/images/pic6.jpg" />
<h:graphicImage value="/images/pic7.jpg" />
<h:graphicImage value="/images/pic8.jpg" />
</a4j:outputPanel>
<br style="clear:both" />
<rich:jQuery selector="#gallery img" query="addClass('pic-
normal')"/>
<rich:jQuery selector="#gallery img" query="wrap('<div class=
\'wrap1\'></div>')" />
<rich:jQuery selector="#gallery img" query="mouseover(function()
{enlargePic(this)})"/>
<rich:jQuery selector="#gallery img" query="mouseout(function()
{normalPic(this)})"/>
<rich:jQuery name="enlargePic" timing="onJScall"
query="stop().animate({width:'480px'})" />
<rich:jQuery name="normalPic" timing="onJScall"
query="stop().animate({width:'120px'})" />
</ui:define>