JQuery Slider isn't smooth, written wrong?

Question

So in my tireless effort to get better with JQuery, I built this horizontal slider. The idea is, when hovered, a div tag expands and it's text opacity becomes visible. The other div tags' titles are meant to fade out.

It seems to work ok, but the animation seems a little choppy. I made the entire background green so you can see on the right how it varies in width from time to time.

http://s354510196.onlinehome.us/TEMPDUMP/JQuerySlider/

Is there a better method for this or am I simply straining the animation too much?

   $(function() {

$("#one").hover(

        function() {
        $("#two, #three, #four, #five").stop().animate({width: 50,  }, 1000);
        $("#titletwo, #titlethree, #titlefour, #titlefive").stop().animate({opacity:0.0}, 500);
        $("#blockone").stop().animate({opacity:1.0}, 1500);
        $("#one").stop().animate({width:700, }, 1000);

                },

        function() {
        $("#two, #three, #four, #five").stop().animate({width: 180, opacity:1.0 }, 1000);
        $("#titletwo, #titlethree, #titlefour, #titlefive").stop().animate({opacity:1.0}, 1000);
        $("#blockone").stop().animate({opacity:0.0}, 500);
        $("#one").stop().animate({width: 180 }, 1000);
                }

);
 });

$(function() {

$("#two").hover(

        function() {
        $("#one, #three, #four, #five").stop().animate({width: 50 }, 1000);
        $("#titleone, #titlethree, #titlefour, #titlefive").stop().animate({opacity:0.0}, 500);
        $("#blocktwo").stop().animate({opacity:1.0}, 1500);
        $("#two").stop().animate({width:700 }, 1000);

                },

        function() {
        $("#one, #three, #four, #five").stop().animate({width: 180 }, 1000);
        $("#titleone, #titlethree, #titlefour, #titlefive").stop().animate({opacity:1.0}, 1000);
        $("#blocktwo").stop().animate({opacity:0.0}, 500);
        $("#two").stop().animate({width: 180 }, 1000);
                }

);
 });

$(function() {

$("#three").hover(

        function() {
        $("#two, #one, #four, #five").stop().animate({width: 50 }, 1000);
        $("#titletwo, #titleone, #titlefour, #titlefive").stop().animate({opacity:0.0}, 500);
        $("#blockthree").stop().animate({opacity:1.0}, 1500);
        $("#three").stop().animate({width:700 }, 1000);

                },

        function() {
        $("#two, #one, #four, #five").stop().animate({width: 180 }, 1000);
        $("#titletwo, #titleone, #titlefour, #titlefive").stop().animate({opacity:1.0}, 1000);
        $("#blockthree").stop().animate({opacity:0.0}, 500);
        $("#three").stop().animate({width: 180 }, 1000);
                }

);
 });

$(function() {

$("#four").hover(

        function() {
        $("#two, #three, #one, #five").stop().animate({width: 50 }, 1000);
        $("#titletwo, #titlethree, #titleone, #titlefive").stop().animate({opacity:0.0}, 500);
        $("#blockfour").stop().animate({opacity:1.0}, 1500);
        $("#four").stop().animate({width:700 }, 1000);

                },

        function() {
        $("#two, #three, #one, #five").stop().animate({width: 180 }, 1000);
        $("#titletwo, #titlethree, #titleone, #titlefive").stop().animate({opacity:1.0}, 1000);
        $("#blockfour").stop().animate({opacity:0.0}, 500);
        $("#four").stop().animate({width: 180 }, 1000);
                }

);
 });

$(function() {

$("#five").hover(

        function() {
        $("#two, #three, #four, #one").stop().animate({width: 50 }, 1000);
        $("#titletwo, #titlethree, #titlefour, #titleone").stop().animate({opacity:0.0}, 500);
        $("#blockfive").stop().animate({opacity:1.0}, 1500);
        $("#five").stop().animate({width:700 }, 1000);

                },

        function() {
        $("#two, #three, #four, #one").stop().animate({width: 180 }, 1000);
        $("#titletwo, #titlethree, #titlefour, #titleone").stop().animate({opacity:1.0}, 1000);
        $("#blockfive").stop().animate({opacity:0.0}, 500);
        $("#five").stop().animate({width: 180 }, 1000);
                }

);
 });

Answer 1

the four parrallel stop/animate do not help I guess.

by the way you can rewrite the full block like this, but it won't change performance

$('.slide').hover( 

    function () {
        $this = $(this);
        $siblings = $this.siblings();

        $siblings.stop().animate({width: 50,  }, 1000);
        $('.fronttitle', $siblings).stop().animate({opacity:0.0}, 500);
        $('.backblock', $this).stop().animate({opacity:1.0}, 1500);
        $this.stop().animate({width:700, }, 1000);

    },
    function () {
        $this = $(this);
        $siblings = $this.siblings();

        $siblings.stop().stop().animate({width: 180, opacity:1.0 }, 1000);
        $('.fronttitle', $siblings).stop().animate({opacity:1.0}, 1000);
        $('.backblock', $this).stop().animate({opacity:0.0}, 500);
        $this.stop().animate({width: 180 }, 1000);
    }   
);