CODEWITHSUNDEEP
jqueryjquery-animate
Emanuel Amiguinho
Emanuel Amiguinho

Reputation: 123

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.

Upvotes: 2

Views: 6225

Answers (3)

Ray
Ray

Reputation: 1222

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.

Upvotes: 2

Daniel Dyson
Daniel Dyson

Reputation: 13230

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

$('this.menu1bar')

try

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

Upvotes: 0

Emmanuel
Emmanuel

Reputation: 5403

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

Upvotes: 2

Related Questions