мышиный z-index 10 анимировать влево, затем mouseleave z-index -10 анимировать назад вправо? - PullRequest
Новая
       14

мышиный z-index 10 анимировать влево, затем mouseleave z-index -10 анимировать назад вправо?

0 голосов
/ 11 января 2012

Я пытаюсь всегда иметь этот скрытый 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 в начале, ничего не работает. Может ли кто-нибудь указать мне правильное направление, чтобы достичь этого?

Ответы [ 3 ]

1 голос
/ 11 января 2012

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

Я бы поменял ваш первый селектор на: 

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

Без этого вы не можете использовать hiddenDiv в качестве селектора

1 голос
/ 11 января 2012 
 .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"); 
        });
});
0 голосов
/ 11 января 2012

Посмотрите на это; 

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