mouseenter z-index 10 анимация слева, затем mouseleave z-index -10 анимация назад вправо?

Question

Я стараюсь, чтобы этот скрытый 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> 

Но я вижу, что, когда я даю скрытый Див Z-индекс -10 на подаяния, ничего не работает , Может ли кто-нибудь указать мне в правильном направлении, чтобы это сделать?

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

Первая проблема, с которой вы столкнулись, - это , ваш hiddendiv не может быть перевернут, его скрыт с вашим индексом -10 z. Что касается вашего селектора, то это не так.

Я хотел бы изменить свой первый селектор:

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