Question

I wonder if someone has an approach to solve a problem I have. I experimented a lot with different code that I mixed from scripts and test servers but they don’t help me because I want to move a transformed div with an inside span that holds text only a bit to the left diagonial out of the site on load, then move into the site on hover but still only the one hovered so this one should move out while leaving the hot area with the mouse arrow.
I get no clue on how to combine the classes in a function that I could possibly call on load. I attach my css and the html in case anyone had sort of a problem already.

I though about something like moving them with margin-left to the left and animating them with margin-left to the right!

This is the jquery I came up with but it just does not do what I want. It moves the things straight left/right, not diagonal in the angle that I want them to move to:

<script type="text/javascript">
        $(function() {
            $('#bgrclub .advantages').hover(
                function () {
                    var $this = $(this);
                    $this.stop().animate({'margin-left':'400px'},500);
                    $('#bgrclub .advantages',$this).stop(true,true).fadeOut(1500);

                },
                function () {
                    var $this = $(this);
                    $this.stop().animate({'margin-left':'95px'},1000);
                    $('#bgrclub .advantages',$this).stop(true,true).fadeIn();
                }
            );
        });


        </script>


    <div id="bgrclub">
    <div class="advantages"><span>A proper solution</span></div>
    <div class="advantages"><span>would have to work</span></div>
    <div class="advantages"><span>with differently</span></div>
    <div class="advantages"><span>long text spand</spa></div>
    <div class="advantages"><span style="padding-left:250px;">Random Text Span</span></div>
<div class="advantages"><span style="padding-left:435px;">A really, really, really long text span</span></div>
</div>

Css:

#bgrclub {background-image:url(../images/club_bgr.jpg);background-repeat:no-repeat;width:755px;height:544px;}
#bgrclub_bottompics {background-image:url(../images/club_bgr_bottompics.jpg); position:absolute; bottom:0px; left:0px;background-repeat:no-repeat;width:755px; height:95px; z-index:999;}
#bgrclub .advantages {position:relative;width:755px;float:left; padding-top:40px;-moz-transform:rotate(-20deg); /* Firefox 3.6 Firefox 4 */-webkit-transform:rotate(-20deg); /* Safari */-o-transform:rotate(-20deg); /* Opera */-ms-transform:rotate(-20deg); /* IE9 */transform:rotate(-20deg); /* W3C */}
#bgrclub .advantages span {font-family: 'Open Sans Condensed', sans-serif;font-size:175%; font-weight:lighter; color:#373737;padding:10px; padding-left:125px; margin-left:-150px; border-bottom-right-radius:10px; border-top-right-radius:20px; z-index:1000;
background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,0) 23%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(23%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 23%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 23%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 23%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 23%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */}

Answer 1

you can define it into

$(document).ready(function () {
/**
* your code
*/
});

and you can change all css attribute in your hover event:

$(#your_div).css('float', 'left');

or

$("#your_div").css('float', 'right');
$("#your_div").css('position', 'relative');

to get your result
etc..