mouseenter z-index 10動畫向左，然後mouseleave z-index -10動畫返回向右？

Question

我試圖在任何時候都有這個隱藏的div在主div後面，exept時：

鼠標進入隱藏div，它應該動畫到左邊，然後回到右邊，並在主要頂部div

然後當鼠標離開隱藏的div時，它向左動畫，然後返回到主div的後面。

我不熟悉的JS和jQuery，所以我想是這樣的：

<div class="mainDiv"> 
    content of main div 

    <div class="hiddenDiv"> 
    content of hidden div 
    </div> 

    rest of content of main div 
</div> 

<script> 
jQuery(document).ready(function() { 
    jQuery(".hiddenDiv")css('z-index',"-10"); 
    //tell hiddenDiv to be hidden, this seem to block everything for some reason 

    jQuery(".hiddenDiv").mouseenter(function() { 
     jQuery(".hiddenDiv").animate({"left": "-=50px"}, "fast").css('z-index',"10"); 
     //when mouse enters, hiddenDiv shows up 
    }), 
    jQuery(".hiddenDiv").mouseleave(function() { 
     jQuery(".hiddenDiv").animate({"left": "+=50px"}, "slow").css('z-index',"-10"); 
     //when mouse leaves, it's hidden again. 
    }); 
}); 
</script> 

但我看到，當我把隱藏的div -10的z-index在乞討，沒有什麼作品。 Anyonde可以指示我去正確的方向嗎？

Answer 1

.css('z-index',"10"); 

應該寫成

.css('zIndex',"10"); 

和你的第二個說法是錯誤的，因爲一個點缺失

jQuery(".hiddenDiv").css('zIndex',"-10"); 

所以儘量寫像這樣反而

jQuery(document).ready(function() { 
    var hdiv = jQuery(".hiddenDiv"); /* cache a reference for a matter of performance */ 

    hdiv.css('zIndex', "-10") 
     .mouseenter(function() { 
      hdiv.animate({"left": "-=50px"}, "fast") 
       .css('zIndex', "10"); 
     }) 
     .mouseleave(function() { 
      hdiv.animate({"left": "+=50px"}, "slow") 
       .css('zIndex', "-10"); 
     }); 
}); 

Answer 2

你遇到的第一個問題就是你的隱藏dendiv不能翻轉，它隱藏着你的-10z索引。就你選擇者而言，它的意義不在於此。

我想你的第一選擇更改爲：

jQuery(".mainDiv").mouseenter(function() { 
    //etc etc 

沒有這個，你不能使用你的hiddenDiv作爲選擇

Answer 3

看一看這一個;

jQuery(document).ready(function() { 

    // Hide all .hiddenDiv 
    //jQuery(".hiddenDiv").css('z-index',"-10"); 
    jQuery(".hiddenDiv").hide(); // Maybe this would be enough to hide the elements? 

    // Bind events to all .mainDiv 
    jQuery('.mainDiv') 
    .mouseenter(function() { 
     jQuery(this).find('.hiddenDiv') // Find all .hiddenDiv in the current .mainDiv 
     //.css('zIndex', "10") 
     .show() 
     .animate({"left": "-=50px"}, "fast"); 
    }) 
    .mouseleave(function() { 
     jQuery(this).find('.hiddenDiv') 
     .animate({"left": "+=50px"}, "slow", function() { 
      // This is a callback function that executes when the animation has finished. 
      //jQuery(this).css('zIndex', "-10"); 
      jQuery(this).hide(); 
     }); 
    }); 
});