Question

我在页面上有6个div，每个都有一个顶层的图层，在悬停时淡出，并在mouseleave上淡入。我现在拥有的是这个，但如果我为单个div层执行此操作，则堆栈会溢出。如何在单个代码块中为所有六个顶层分配功能？感谢您提供任何线索！ JSFIddle here

<script>
    $(function(){      
        $(".hover6").mouseenter(function() {
            $(this).siblings().fadeIn();
            $(this).fadeOut();
        });

        $("#div6").mouseleave(function() {
            $(".hover6").fadeIn('slow');
        });
        $(this).siblings().fadeOut();
    })  
</script>



<script>
    $(function(){      
        $(".hover5").mouseenter(function() {
            $(this).siblings().fadeIn();
            $(this).fadeOut();
        });

        $("#div5").mouseleave(function() {
            $(".hover5").fadeIn('slow');
        });
        $(this).siblings().fadeOut();
    })    
</script>

//等等 - 其他4个div的相同脚本

Answer 1

使用公共类，然后您可以使用类选择器来绑定事件。

HTML 的

<div id="div1" class="divContainer">
    <div class='hover hover1'>Overlay on top</div>
    <div>subdiv in div 1</div>
    <div>subdiv in div 1</div>
</div>

脚本

//Bind event using common class
$(".hover").mouseenter(function () {
    $(this).siblings().fadeIn();
    $(this).fadeOut();
});

$(".divContainer").mouseleave(function () {
    //Use find 
    var hoverElem = $(this).find(".hover");

    hoverElem.fadeIn('slow'); 
    hoverElem.siblings().fadeOut();     
});

DEMO

Answer 2

  <div class="wrapper">

  <div id="div1" class="mouse-enter">
   <div>Overlay on top</div>
   <div>subdiv in div 1</div>
   <div>subdiv in div 1</div>

    </div>
   <div id="div2" class="mouse-enter">
     <p class="auto-style1">This is div2</p>
       <div>Overlay on top</div>
       <div>subdiv in div 2</div>
       <div>subdiv in div 2</div>
   </div>
   <div id="div3" class="mouse-enter">
     <div>Overlay on top</div>
     <div>subdiv in div 3</div>
     <div>subdiv in div 3</div>
  </div>
  <div id="div4" class="mouse-enter">
    <div>Overlay on top</div>
    <div>subdiv in div 4</div>
    <div>subdiv in div 4</div>
  </div>
 <div id="div5" class="mouse-enter">
   <div>Overlay on top</div>
   <div>subdiv in div 5</div>
   <div>subdiv in div 5</div>
</div>
<div id="div6" class="mouse-enter">
   <div>Overlay on top</div>
   <div>subdiv in div 6</div>
   <div>subdiv in div 6</div>
</div>
</div>

 $('.mouse-enter').click(
    function(){
    $(this).animate({'width': '100%', 'height':'100%'},600).siblings().animate({'width':'0','height':'0'},600);
    $('<button class="show">XClose</button>')
        .appendTo ('.wrapper');
});

   $(document).on('click','.show', function() {
     $(this).animate({
    'width': '0',
    'height': '0'
  }, 600).siblings().animate({
    'width': '50%',
    'height': '33.33%'
  }, 600);
  $(this).remove();
  });

如何在jQuery中处理类似类div的重复/迭代淡出？

2 个答案: