Javascript 使用Jquery制作动画后需要重置原始样式吗？

我一直在做一个简单的JQuery滑块，我很难让导航栏动画和图像滑块动画保持同步。这是代码

Html

Javascript

//Fade in and outs
function slideSwitch() {
    //Image slider
    var $active= $('#slider ul li.active');
    if ($active.length == 0) $active = $('slider ul li:last')
    var $next = $active.next().length ? $active.next()
      : $('#slider ul li:first');
    $active.addClass('last-active');
    $next.addClass('active');
    $active.removeClass('active');

    //Fade animation
    $next.css({opacity: 0.05})
      .addClass('active')
      .animate({opacity: 1.00}, 1000, function() {
        $active.removeClass('active last-active');
    })

}
function toolbarSwitch() {
    //toolbar slider
    var $active= $('#toolbar ul li.active');
    if ($active.length == 0) $active = $('slider ul li:last')
    var $next = $active.next().length ? $active.next()
      : $('#toolbar ul li:first');
    $active.addClass('last-active');
    $next.addClass('active');
    $active.removeClass('active');

    //Fade animation
    $next.css({background: rgb(31,29,30)})
      .addClass('active')
      .animate({background: rgb(100,100,100)}, 1000, function() {
        $active.removeClass('active last-active');
    })
}

//Interval between slides

$(function() {
    setInterval("slideSwitch()", 5000);
    setInterval("toolbarSwitch()", 5000);
});

为了便于参考，我嵌入了Jquery，一个Jquery颜色插件来设置颜色动画。提前感谢您的帮助。

这是同步问题吗？ 过去我遇到过这样的问题，我在jquery中使用stop方法

$（“#切换”）。打开（“单击”，函数（）{
$block.stop（）.slideToggle（1000）；
});

这只是一个例子，但会帮助你得到同步动画


#slider {
 position:relative;
 display:block;
 height : 338px;
 width: 600px;
 clear: both;
 left:20%;
 margin: 0px 0px 0px 0px;
 padding: 0px;
}
#slider ul {
 list-style:none;
 margin: 0px 0px 0px 0px;
 overflow:hidden;
}
#slider ul li{
 position:absolute;
 top: 0;
 left: 0;
 z-index: 8;
 opacity: 0.0
}
#slider ul li img {
 width:600px;
 height: 338px;
 margin: 0px 0px 0px 0px;
}
#slider ul li.active {
 z-index: 10;

}
#slider ul li.last-active {
 z-index: 9;
}
#toolbar {
 position:relative;
 display: block;
     width: 600px;
 left: 20%;

 }
 #toolbar ul {
 position: absolute;
 list-style:none;
 padding: 10px;
 display:block;
 left: 0px;
 top: 0px;
 overflow: hidden;
 width:600px;
 margin: 0px 0px 0px 0px;
 padding: 0px 0px 0px 0px;
}
#toolbar ul li{
 float:left;
 z-index:8;
 background: rgb(31,29,30);
}
#toolbar ul li.active{
 z-index:10;
 background: rgb(105,100,100);
}
#toolbar ul li.lastactive{
 z-index:9;
}
#toolbar ul li a {
 display: block;
 width: 190px;
 height:80px;
 color: #fff;
 text-decoration:none;
 font-size: 24px;
 font-style: bold;
 padding: 5px;
 z-index:8;

}
#toolbar ul li a p {
 padding: 0px;
 margin:0px;
 font-size:14px;
}

//Fade in and outs
function slideSwitch() {
    //Image slider
    var $active= $('#slider ul li.active');
    if ($active.length == 0) $active = $('slider ul li:last')
    var $next = $active.next().length ? $active.next()
      : $('#slider ul li:first');
    $active.addClass('last-active');
    $next.addClass('active');
    $active.removeClass('active');

    //Fade animation
    $next.css({opacity: 0.05})
      .addClass('active')
      .animate({opacity: 1.00}, 1000, function() {
        $active.removeClass('active last-active');
    })

}
function toolbarSwitch() {
    //toolbar slider
    var $active= $('#toolbar ul li.active');
    if ($active.length == 0) $active = $('slider ul li:last')
    var $next = $active.next().length ? $active.next()
      : $('#toolbar ul li:first');
    $active.addClass('last-active');
    $next.addClass('active');
    $active.removeClass('active');

    //Fade animation
    $next.css({background: rgb(31,29,30)})
      .addClass('active')
      .animate({background: rgb(100,100,100)}, 1000, function() {
        $active.removeClass('active last-active');
    })
}

//Interval between slides

$(function() {
    setInterval("slideSwitch()", 5000);
    setInterval("toolbarSwitch()", 5000);
});