mouseenter z-index 10动画向左，然后mouseleave z-index -10动画返回向右？

我试图在任何时候都有这个隐藏的div在主div后面，exept时：mouseenter z-index 10动画向左，然后mouseleave z-index -10动画返回向右？

鼠标进入隐藏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可以指示我去正确的方向吗？

来源

2012-01-11 mlclm

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

来源

2012-01-11 17:05:39 fcalderan

谢谢，但它没有奏效：-10 z-index防止效果/动画/行为发生。当我悬停hiddendiv时，注意到移动并且它不在顶部显示（z-index不改变它保持在-10）。 – mlclm 2012-01-18 15:39:01

你遇到的第一个问题就是你的隐藏dendiv不能翻转，它隐藏着你的-10z索引。就你选择者而言，它的意义不在于此。

我想你的第一选择更改为：

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

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

来源

2012-01-11 17:06:25

看一看这一个;

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(); 
     }); 
    }); 
});

来源

2012-01-11 17:07:51 Stefan

mouseenter z-index 10动画向左，然后mouseleave z-index -10动画返回向右？

回答

相关问题