我正在尝试编写自己的图像叠加动画。我的主要问题是动画不会让我选择叠加层。我想在里面放一个链接。动画有时也会加倍。我尝试使用stop()
但无济于事。有人可以给我一些建议,让我知道我要解决这个问题吗?
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.8.2.min.js"/></script>
<style>
#home_sec_2 {z-index:20; position:relative; display:inline-block}.hide{display:none;}
#home_sec_2 img{outline:0;text-decoration:none; display: inline-block;float:left;}
.imgOverLay1{height:70px; width:314px; background-color:#F01414; display:none; float:left; z-index:8000; position: absolute; opacity: 0.5;filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5;bottom: 0px; float:left;}
</style>
</head>
<body> <div id="home_sec_2">
<h2>WHATS IN THE MIX</h2>
<div class="imgOverLay1" id="ov0">Here is the First</div>
<img src="midimg1.png" width="314" height="145" class="c1"
alt="LA NORIE"/>
<div class="imgOverLay1" id="ov1">Here is the Second</div>
<img src="midimg2.png" width="314" height="145" class=
"c1" alt="BATTLEFIELD 3" />
<div class="imgOverLay1" id="ov2">Here is the Third</div>
<img src="midimg3.png" width="314" height="145" class="c1" alt=
"CALL OF DUTY: MW3" />
</div></body>
<script>
$(function(){
$("#home_sec_2 img").attr("id", function (arr) {
return arr;
});
$('#home_sec_2').on('mouseover','img',function(){
position = $(this).position().left;
var $ll = $(this).attr('id');
console.log(this);
$('#ov'+$ll).css({left:position});
$('#ov'+$ll).addClass('shown');
$('#ov'+$ll).slideToggle('slow');
var $this = $('#ov'+$ll);
console.log($this);
}),
$('#home_sec_2').on('mouseleave','img',function(){
$ll = $(this).attr('id');
$('#ov'+$ll).slideToggle('slow');
console.log($('#ov'+$ll));
})
});
</script>
</html>
如果我将鼠标放在叠加层上,动画slideToggle
完成并隐藏 div。