Help with animating a child element

Help with animating a child element

Hi all

I have the following HTML of links:

  1. <ul class="maingrid">
        <li><aside class="slidebox left">Test One</aside><img src="/images/image.jpg"></li>
        <li><aside class="slidebox right">Test Two</aside><img src="/images/image.jpg"></li>
        <li><aside class="slidebox top">Test Three</aside><img src="/images/image.jpg"></li>
        <li><aside class="slidebox bottom">Test Four</aside><img src="/images/image.jpg"></li>
        <li><aside class="slidebox right">Test Five</aside><img src="/images/image.jpg"></li>

The idea being that the <aside> tags have a negative margin and can't be seen initially, all the user sees is the image in each list item. When they hover over the image, the <aside> tag slides in via top, bottom, left or right direction as per the class name associated to the <aside> tag. I have this nearly working but when I hover over (using the example above) the the second list item, both the second <aside> and the fifth <aside> animate as they have the same class name.

This is my js:

  1.     $('.maingrid li').hoverIntent({
            over: function(){simpleTestOver($(this).find('.slidebox').attr('class'))},
            out: function(){ },
            timeout: 200
        },function(){ });

  2. function simpleTestOver(element) {
         // take the string e.g. 'slidebox left' and store into array
        var useclass = element.split(" ");

        switch(useclass[1]) {
            case 'left':
                $("."+useclass[0]+"."+useclass[1]).animate({ marginLeft: "230px"} , 1000);
            case 'right':
                $("."+useclass[0]+"."+useclass[1]).animate({ marginRight: "230px"} , 1000);
            case 'top':
                $("."+useclass[0]+"."+useclass[1]).animate({ marginTop: "230px"} , 1000);
            case 'bottom':
                $("."+useclass[0]+"."+useclass[1]).animate({ marginBottom: "230px"} , 1000);

Can anyone help and provide a solution that will only animate the <aside> tage that is related to the list item I am hovering over?

Many Thanks