Question

我正在尝试编写自己的图像叠加动画。我的主要问题是动画不会让我选择叠加层。我想在其中添加一个链接。动画有时也加倍。我试过使用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。

Answer 1

更新的现在尝试，;）

<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>

图像叠加动画，无法选择无动画循环的叠加

1 个答案: