JQuery Slider 不流畅，写错了？

Question

因此，在我不懈努力以更好地使用 JQuery 的过程中，我构建了这个水平滑块。这个想法是，当悬停时，div 标签会展开，并且它的文本不透明度变得可见。其他 div 标签的标题会淡出。

看起来效果不错，但动画似乎有点不稳定。我将整个背景设为绿色，这样您就可以在右侧看到它的宽度如何不时变化。

有没有更好

的方法这还是我只是让动画过度紧张？

   $(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

我猜四个并行的停止/动画没有帮助。

顺便说一下，你可以像这样重写整个块，但这不会改变性能

$('.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);
    }   
);