Jquery 图像叠加动画，可以'；t选择不带动画循环的覆盖_Jquery_Jquery Selectors

Jquery 图像叠加动画，可以'；t选择不带动画循环的覆盖

jquery

Jquery 图像叠加动画，可以'；t选择不带动画循环的覆盖,jquery,jquery-selectors,Jquery,Jquery Selectors,我正在尝试编写自己的图像叠加动画。我的主要问题是动画不允许我选择覆盖。我想在里面放一个链接。动画有时也会加倍。我试图使用stop（），但没有用。有没有人能给我一些建议，告诉我该怎么处理这个问题 <html> <head> <title></title> <script type="text/javascript" src="jquery-1.8.2.min.js"/></script> <s

我正在尝试编写自己的图像叠加动画。我的主要问题是动画不允许我选择覆盖。我想在里面放一个链接。动画有时也会加倍。我试图使用

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>


#home_secu_2{z-index:20；位置：相对；显示：内联块}。隐藏{display:none；}
#home_sec_2 img{大纲：0；文本装饰：无；显示：内联块；浮点：左；}
.imgOverLay1{高度：70px；宽度：314px；背景色：#F01414；显示：无；浮点：左；z索引：8000；位置：绝对；不透明度：0.5；过滤器：alpha（不透明度=50）；-moz不透明度：0.5；-khtml不透明度：0.5；底部：0px；浮点：左；}
混合了什么
这是第一个
这是第二个
这是第三个
$（函数（）{
$（“home#u secu_2 img”）.attr（“id”，函数（arr）{
返回arr；
});
$（'home#u secu_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（'显示'）；
$（'#ov'+$ll）.slideToggle（'slow'）；
var$this=$（'#ov'+$ll）；
console.log（$this）；
}), 
$（'home#u secu_2'）。on（'mouseleave'，'img'，function（）{
$ll=$（this.attr（'id'）；
$（'#ov'+$ll）.slideToggle（'slow'）；
log（$（'#ov'+$ll））；
})
});

如果我将鼠标放在覆盖上，动画

滑动切换将完成并隐藏div.更新：
现在试试看，；）

#home_secu_2{z-index:20；位置：相对；显示：内联块}。隐藏{display:none；}
#home_sec_2 img{大纲：0；文本装饰：无；显示：内联块；浮点：左；}
img+.imgOverLay1{溢出：隐藏；高度：0px；宽度：314px；背景色：#F01414；浮动：左侧；z索引：8000；位置：绝对；不透明度：0.5；过滤器：alpha（不透明度=50）；-moz不透明度：0.5；-khtml不透明度：0.5；底部：0px；浮动：左侧；-webkit转换：高度0.5s；-moz转换：高度0.5s；转换：高度0.5s；}
img:hover+.imgOverLay1，img+.imgOverLay1:hover{height:70px；}
混合了什么
window.onload=function（）{
$（'.imgOverLay1'）。每个（函数（）{
$（this.css（{“left”：$（this.prev（）.position（）.left}）；
});
};
所有的覆盖层都在彼此的顶部出现！没问题：）如果你觉得它有用，请随意将其标记为正确答案。如果你觉得答案有用，请投票表决。
<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>