jquery幻灯片动画不循环

时间:2014-11-28 14:53:11

标签: javascript jquery html css toggle

我的脚本在第一次点击时完成了工作,但不是返回,特别是在第二轮。

我想要一次又一次地执行第一轮中发生的事情,特别是逆转。此外,我认为我使它比必要的更复杂或? 有没有人知道如何改进这个以成为一个循环?

[ jsfiddle here ]

    function goto(id, t){
            //animate to the div id.
            $(".slider_box_vert_mid")
                .animate(
                    {"left": -($(id).position().left)}, {
                duration: 400,
                easing: 'easeInOutCubic',
                queue: false
            });
            $(".slider_box_vert_mid2")
                .animate(
                    {"right": -($(id).position().left)}, {
                duration: 400,
                easing: 'easeInOutCubic',
                queue: false,
                complete: function() {
                    $(".slider_box_vert_mid").toggleClass("hidebox");
                    $(".slider_box_vert_mid2").toggleClass("hidebox");
                    $(".slider_inner_slide")
                        .animate(
                            {"left": -($(id).position().left)}, {
                        duration: 1000,
                        easing: 'easeInOutCubic',
                        queue: false,
                        complete: function() {
                            $(".slider_box_vert_mid3").toggleClass("showbox");
                            $(".slider_box_vert_mid3")
                                .animate(
                                    {left: '0'}, {
                                duration: 400,
                                easing: 'easeInOutCubic',
                                queue: false
                            });
                            $(".slider_box_vert_mid4").toggleClass("showbox");
                            $(".slider_box_vert_mid4")
                                .animate(
                                    {right: '0'}, {
                                duration: 400,
                                easing: 'easeInOutCubic',
                                queue: false
                            });
                        }});
                    }
                });

            // add active class to the current link
            $(t).addClass('active');
        }

更改1

当然可以确定实现它的功能,但当然不是真正的解决方案

0 个答案:

没有答案