Question

因此，在我不断努力改善JQuery的过程中，我构建了这个水平滑块。这个想法是，当悬停时，div标签会扩展，并且文本的不透明度变得可见。其他div标签的标题意味着淡出。

似乎工作正常，但动画似乎有些不稳定。我将整个背景设为绿色，以便您可以在右侧看到它的宽度随时变化。

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

有没有更好的方法，或者我只是过多地使动画过度紧张？

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

JQuery Slider不流畅，写错了？

1 个答案: