mouseenter z-index 10 动画到左边，然后 mouseleave z-index -10 动画回到右边？答案

【问题标题】：mouseenter z-index 10 animate to left, then mouseleave z-index -10 animate back to right?mouseenter z-index 10 动画到左边，然后 mouseleave z-index -10 动画回到右边？
【发布时间】：2012-01-11 16:58:56
【问题描述】：

我一直在尝试将这个隐藏的 div 放在主 div 后面，除了以下情况：

鼠标进入隐藏的 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 的 z-index 为 -10 时，没有任何效果。任何人都可以指出我实现这一目标的正确方向吗？

【问题讨论】：

标签： jquery jquery-animate z-index mouseenter mouseleave

【解决方案1】：

您遇到的第一个问题是，您的 hiddendiv 无法翻转，它被您的 -10 z 索引隐藏。就您的选择器而言，这意味着它不存在。

我会将您的第一个选择器更改为：

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

没有这个你不能使用你的 hiddenDiv 作为选择器

【讨论】：

【解决方案2】：

 .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"); 
        });
});

【讨论】：

谢谢，但它不起作用：-10 z-index 阻止了效果/动画/行为的发生。当我悬停 hiddendiv 时，注意到移动并且它没有显示在顶部（z-index 没有改变它保持在 -10）。

【解决方案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();
        });
    });
});

【讨论】：