أزرار الرسوم المتحركة jQuery التي لن تتصرف فقط

Question

حسنًا ، لدي قائمة مضمنة من الأزرار.

<ul id="nav">
   <li class="home"><a href="#">Menu Item</a></li>
   <li class="contact"><a href="#">Menu Item</a></li>
   <li class="about"><a href="#">Menu Item</a></li>
</ul>

.home{
position:absolute;
bottom:0;
background-image:url(../img/menu/single_line.png);
background-repeat:no-repeat;
height:34px;
width:134px;
}
.home_hover{
position:absolute;
bottom:0;
background-image:url(../img/menu/single_line_over.png);
background-repeat:no-repeat;
height:70px;
width:134px;
}

$(document).ready(function(){
 $("#nav .home").mouseover(function(){
        $(this).toggleClass("home_hover").slideToggle("slow");
        return false;
    }).mouseout(function(){
        $(this).toggleClass("home_hover").slideToggle("slow");
        return false;
    });
});

يحتوي كل عنصر من عناصر القائمة على صورة خلفية ، ثم عندما يتم استبدال صورة الخلفية بصورة أطول. في النهاية أحاول إنشاء قائمة بسيطة حيث يبدو أن عنصر القائمة في Mouseover ينزلق. ولكن في الواقع يمكن أن تحفز jQuery toggleclass مع انزلاق. المشكلة هي أن هذا الرمز الحالي لا يتصرف بشكل صحيح.

إنه يقفز لأعلى ولأسفل ، لأن النص يتحرك. أنا جديد جدًا على jQuery ، لذا فإن أي مساعدة موضع تقدير كبير. أنا أيضا تحميل هذا في http://gasworks.ravennainteractil.com/result/

شكرًا

Answer 1

جرب هذا (العرض التوضيحي):

CSS:

#header{
    height:100px;
}

#nav{
    height:34px;
    position:relative;
}

.home{
    position:absolute;
    bottom:0;
    background-image:url(http://gasworks.ravennainteractive.com/result/img/menu/single_line.png);
    background-repeat:no-repeat;
    height:34px;
    width:134px;
}

.home_hover{
    background-image:url(http://gasworks.ravennainteractive.com/result/img/menu/single_line_over.png);
}

النصي

$(document).ready(function(){
    $("#nav li").mouseover(function(){
        $(this).addClass('home_hover').stop().animate({ height: '70px'},'slow');

    }).mouseout(function(){
        $(this).stop().animate({ height: '34px'},'slow', function(){  
            $(this).removeClass('home_hover');
        })

    });
});