0

好的,首先 - 它不是toggle()这样的。

这段代码应该像滑块一样工作。1 div 正在显示,单击一个按钮,下一个 div 显示,单击另一个按钮,第一个 div 显示。

到目前为止,这可行,但向后退却行不通。所以按钮可以显示第二个 div,但点击我制作的“更少”按钮只会使第二个 div 消失,而第一个 div 仍然隐藏。

这是代码:

$('.more').click(function() {
    $('.c1')
        .animate({ left: "-828px" }, 600, 'easeInOutQuint')
        .delay(300, function() {
            $('.c2').animate({ left: "0px" }, 600, 'easeInOutQuint'); 
        }
    );
});

$('.less').click(function() {
    $('.c2')
        .animate({ left: "828px" }, 600, 'easeInOutQuint')
        .delay(300, function(){
            $('.c1').animate({ left: "0px" }, 600, 'easeInOutQuint'); 
        }
    );
});

我错过了什么?我怎么能这样做,以便我基本上不会重复相同的代码两次?

4

3 回答 3

2

您是否尝试过使用回调函数而不是延迟?

$('.more').click(function(){
    $('.c1').animate({ left:"-828px"}, 600, 'easeInOutQuint',function(){
       $('.c2').animate({left:"0px"}, 600, 'easeInOutQuint'); 
    });
});
$('.less').click(function(){
    $('.c2').animate({ left:"828px"}, 600, 'easeInOutQuint',function(){
       $('.c1').animate({left:"0px"}, 600, 'easeInOutQuint'); 
    });
});
于 2012-11-23T15:16:22.357 回答
1

你对.delay.

在 jquery 文档中:

描述:设置一个定时器来延迟队列中后续项目的执行。

其参数为:duration [, queueName].

另外,从SO 回答

delay() 函数仅适用于在元素上排队的操作

所以我认为你最好的选择是,正如@nicolast 所说,使用回调。在这里它正在工作。最后的代码是:

$('.more').click(function() {
    $('.c1')
        .animate({ left: "-400px" }, 600, function() {
            $('.c2').animate({ left: "0px" }, 600);
        }
    );
});

$('.less').click(function() {
    $('.c2')
        .animate({ left: "400px" }, 600, function(){
            $('.c1').animate({ left: "0px" }, 600);
        }
    );
});
于 2012-11-27T11:52:45.240 回答
0

这重现作品。按下更多时:c1 变为 -100px,然后 c2 变为 0px 当按下更少时:c2 变为 100px,之后 c1 变为 0px

$('.more').click(function() {
    $('.c1')
    .stop()
    .animate({ left: "-100px" }, 600, 'linear')
    .delay(300, function() {
        $('.c2').stop().animate({ left: "0px" }, 600, 'linear'); 
    });
});

$('.less').click(function() {
    $('.c2')
    .stop()
    .animate({ left: "100px" }, 600, 'linear')
    .delay(300, function(){
        $('.c1').stop().animate({ left: "0px" }, 600, 'linear'); 
    });
});
于 2012-11-23T15:33:33.103 回答