2013-02-13 121 views
0

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

它在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; 
    }); 
}); 

回答

0

你不使用任何理由本地:

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

的原因是因为我无法弄清楚如何设置一个延迟,所以用户不能点击其他按钮并让幻灯片播放另一个。 – hijinxbassist 2013-02-13 01:27:49

+0

你的答案确实有帮助,我刚刚意识到这种方法也可以有一个完整的功能。感谢芽。另一个我带动画的原因是我可以在当前和下一个div之间设置差距,但我确定我可以弄明白。再次感谢您的帮助。 – hijinxbassist 2013-02-13 01:45:45