Help to animate children div JQuery

I'm trying something like this

 jQuery(document).ready(function($){
    $('nav ul li').hover(
        function() {
            $('this.menu1bar').animate({ backgroundColor: "#95c938" }, "fast");
            $('this.menu2bar').animate({ backgroundColor: "#95c938" }, "fast");
        },
        function() {
            $('this.menu1bar').animate({ backgroundColor: "#a99672" }, "fast");
            $('this.menu2bar').animate({ backgroundColor: "#a99672" }, "fast");
       }
   );
   });

The objective of this code is animate the children div .menu1bar and .menu2bar can anyone help with this step, the code works for all children divs of UL, but im only want the children of LI hover event开发者_Go百科.

This should work:

jQuery(document).ready(function($){
    $('#nav ul li').hover(
        function() {
            $(this).find('.menu1bar,.menu2bar').animate({ backgroundColor: "#95c938" }, "fast");
        },
        function() {
            $(this).find('.menu1bar,.menu2bar').animate({ backgroundColor: "#a99672" }, "fast");
       }
    );
});

Try using children() to select a specific element. Something like this:

$('this').children('.menu1bar').animate({ backgroundColor: "#95c938" }, "fast");

Edit:

Of course you can also use find(), but there's a difference:

• Find() searches all children, all levels, also grandchildren.
• Children() searches only first level children.

Please show your HTML Markup. I think that the problem might be in the following...

$('this.menu1bar')

try

$(this).find('.menu1bar')