Question

please, can You help me? i want select ‘img’, where is cursor on menu ‘li.menu_item’, some like this: $(‘li.menu_item a’).children(‘img’)…, but this one not working… I want it animate in jQuery…

<ul class="menu">
            <li class="menu_item"><a class="selected" href="#"> domů </a></li>
            <li class="menu_item"><a href="#">
                <div>
                    <img class="img_mask" src="design/btndark.png" />
                </div>
                <div class="menu_mask">fotografie</div>
            </a></li>
            <li class="menu_item"><a class="nonselect" href="#">
                <div>
                    <img class="img_mask" src="design/btndark.png" />
                </div>
                <div class="menu_mask">
                    rezervace
                </div>
            </a></li>
            <li class="menu_item"><a class="nonselect" href="#">
                <div>
                    <img class="img_mask" src="design/btndark.png" />
                </div>
                <div class="menu_mask">
                    konetakt
                </div>
            </a></li>
            <li class="cl"></li>
        </ul>

<script type="text/javascript">

$(function() {

    $('.img_mask').animate({
        "opacity" : .0
    });

    $('li.menu_item a').hover(
        // problem je jeste v tom, ze pokud rychle prejizdim pres prvky, tak se "dopredu najedou" a kdyz jsem uz mimo obrazek, jeste blikaji...
        // tento problem lze vyresit tim, ze zkontruluju jestli bylo animovano
        // takze reknu funkci hover, ze nejprve ma zastavit a az pak animovat
        function() {
            $('.img_mask').stop().animate({ "opacity" : .8 });
        },
        function() {
            $('.img_mask').stop().animate({ "opacity" : .0 });
        }
    );

});

</script>

Answer 1

Use this to refer to the current item being hovered:

$('li.menu_item a').hover(
    function() {
        $(this).find('.img_mask').stop().animate({ "opacity" : .8 });
    },
    function() {
        $(this).find('.img_mask').stop().animate({ "opacity" : .0 });
    }
);

Except that you appear to have <div> tags nested in your <a> tags. This isn’t valid unless you’ve made the <a> elements display:block or something besides inline.