基于Jquery的按钮滑块

时间:2013-02-13 00:47:41

标签: jquery slider css-animations

我正在创建我的第一个jquery函数。视图窗口上方有一组按钮。视图窗口用div初始化,当按下其中一个按钮时,相应的div滑入视图窗口。

它在firefox中半工作(在任何其他浏览器中都不起作用)但最终没有div滑入视图窗口。我认为这个问题与css左边的值超出范围有关,但我不确定如何解决它。

JS

$(function() {
var prevButton = 3;
$("#par3").show();

$(".window_control").click(function() {
    var cur = this.id;

    if(cur != prevButton){

        var activeItem = $("#par"+prevButton);
        var nextItem = $('#par'+cur);

        var slider = $(".slider");
        var finalWidth = slider.width()*2;
        var animationTime = 2000;

        var cssDir = (prevButton > cur) ? "right" : "left";
        var animation = (prevButton > cur) ? { left: '+=' + finalWidth } : { left: '-=' + finalWidth };

        prevButton = cur;

        activeItem
            .animate(animation, animationTime);

        nextItem
            .show()
            .css(cssDir, finalWidth)
            .animate(animation, animationTime);
    }
    return false;
  });
}); 

1 个答案:

答案 0 :(得分:0)

您没有使用本机的原因:

 $('div').show("slide", { direction: "left" }, 1000);