Question

I’m trying to animate the div within an list item with a click event but can’t see why the code isn’t working?

It works when I specify the direct path to the div but I want to keep the script so it does’nt use specific classes.

$('#home ul.circles li').click(function() {
    $(this).next('div').animate({opacity: 0.8, top:'0'}, 1500 );
});

HTML

<ul class="circles">
        <li class="c-1"><div class="c-1-active">Text Link</div></li>
        <li class="c-2"></li>
        <li class="c-3"></li>                             
</ul>

I’m trying to reverse the effect but can’t seem to store the path to a var?

$('#home ul.circles li').click(function() {
    alert(testing);
    if(testing > "" || testing == $(this).find('div'))
    {
        testing.animate({opacity: 0, top:'180px'}, 1000 );
    }
        $(this).find('div').animate({opacity: 0.8, top:'0'}, 1000 );
        var testing = $(this).find('div');

});

Answer 1

The div is inside the li element. Use .find(..) instead.