图像叠加动画，不能选择无动画循环叠加

我想写我自己的图像叠加动画。我的主要问题是动画不会让我选择叠加层。我想在其中添加一个链接。动画有时也会增加一倍。我试图使用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完成和隐藏股利。

来源

2012-12-19 Brett

如果你找到了答案有用的，请给予好评吧。 – ppsreejith

更新： 这里现在就来试试;）

<html> 
    <head>   
    <title></title> 
<script type="text/javascript" src="jquery.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;} 
img + .imgOverLay1{overflow:hidden;height:0px; width:314px; background-color:#F01414; 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;-webkit-transition:height 0.5s;-moz-transition:height 0.5s;transition:height 0.5s;} 
img:hover + .imgOverLay1,img + .imgOverLay1:hover{height:70px;} 
</style> 
    </head> 
    <body> <div id="home_sec_2"> 
      <h2>WHATS IN THE MIX</h2> 
       <img src="img1.png" width="314" height="145" class="c1" 
       alt="LA NORIE"/> 
       <div class="imgOverLay1" id="ov0"><a href="#">Here is the First</a></div>   

      <img src="img2.jpg" width="314" height="145" class= 
       "c1" alt="BATTLEFIELD 3" /> 
       <div class="imgOverLay1" id="ov1"><a href="#">Here is the Second</a></div> 

       <img src="img1.jpg" width="314" height="145" class="c1" alt= 
       "CALL OF DUTY: MW3" /> 
       <div class="imgOverLay1" id="ov2"><a href="#">Here is the Third</a></div> 
      </div></body> 
<script> 
window.onload=function(){ 
$('.imgOverLay1').each(function(){ 
$(this).css({"left":$(this).prev().position().left}); 
}); 
}; 
</script> 
</html>

来源

2012-12-19 22:22:30 ppsreejith

仍然没有运气我担心 – Brett

所有的覆盖物都出现在彼此的顶部 – Brett

好吧，我已经更新了！现在试试！ – ppsreejith

图像叠加动画，不能选择无动画循环叠加

回答

相关问题