I had Created a page using ajax with 3 div class name m1 element in a row in each me class div element there is some html element,problem is i want it to zoom-in on mouseover, and zoom-out on mouseout event but it got interrupted by inner html element and make it in a loop,
Any suggestion?
:html code
:css code
#cretyu {
border: 0 solid #FF0000;
display: none;
left: 0;
min-height: 200px;
position: relative;
top: 0;
width: 700px;
}
.cretyu1 {
border: 0 solid #00FF00;
display: block;
min-height: 160px;
position: absolute;
top: 0;
width: 700px;
}
.cretyu2 {
background: none repeat scroll 0 0 #FFFFFF;
border: 0 solid #0000FF;
cursor: pointer;
float: left;
left: 0;
min-height: 150px;
position: absolute;
top: 2px;
width: 225px;
}
.cretyu3 {
background: none repeat scroll 0 0 #FFFFFF;
border: 0 solid #0000FF;
cursor: pointer;
float: left;
left: 230px;
margin-left: 10px;
min-height: 150px;
position: absolute;
top: 2px;
width: 225px;
}
.cretyu4 {
background: none repeat scroll 0 0 #FFFFFF;
border: 0 solid #0000FF;
cursor: pointer;
float: left;
left: 460px;
margin-left: 10px;
min-height: 150px;
position: absolute;
top: 2px;
width: 225px;
}
: jquery code
$(".m1").hover(function(){
$(this).parent().prev(‘span’).addClass(“spankjiu1”);
$(this).parent().prev(‘span’).removeClass(“spankjiu”);
$(".spankjiu1").fadeIn(100);
$(this).parent().parent().parent().parent().css({“z-index”: 23});
$(this).addClass(“borrad”);
$(this).animate({ border:“1px solid #aaa”,
height: “200”,
width: “300”,
left: “-=20”,
top: “-=20”
}, “normal”,function(){$("#"+a).children().children().css({“width”:“280px”,“marginLeft”:“10px”});});
},function(){
$(".spankjiu").fadeOut(100);
$(this).parent().prev(‘span’).addClass(“spankjiu”);
$(this).parent().prev(‘span’).removeClass(“spankjiu1”);
$(this).parent().parent().parent().parent().css("z-index", 0);
$(this).removeClass("borrad");
$(this).animate({
height: "135",
width: "215",
left: "+=20",
top: "+=20"
}, "normal",function(){$("#"+a).children().children().css({"width":"225px","marginLeft":"0px"});});
$(".spankjiu").fadeOut(100);
});