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>
   </ul>
   
   
   
   
   
   

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. 
   
3. 
   
4. 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);
           break;
           case 'right':
               $("."+useclass[0]+"."+useclass[1]).animate({ marginRight: "230px"} , 1000);
           break;
           case 'top':
               $("."+useclass[0]+"."+useclass[1]).animate({ marginTop: "230px"} , 1000);
           break;
           case 'bottom':
               $("."+useclass[0]+"."+useclass[1]).animate({ marginBottom: "230px"} , 1000);
           break;
       }
   }
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

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

Doug