使用Jquery做动画之后需要重置原始样式吗？

我一直在研究一个简单的JQuery滑块，我很难尝试让导航栏动画和图像滑块动画保持同步。这是代码。使用Jquery做动画之后需要重置原始样式吗？

的Html

<div id="slider"> 
    <ul> 
    <li ><a href="our_chapter.html"><img src="images/nationals.JPG" class="slider_img" class='active'/></a></li> 
    <li><a href="classes_at_harriton.html"><img src="images/competitionstart.JPG" class="slider_img" /></a></li> 
    <li><a href="http://webmaster.tsaprotectandserve.com"><img src="images/tsa.JPG" class="slider_img"/></a></li> 
    </ul> 
</div> 

<div id="toolbar"> 
    <ul> 
    <li><a href="our_chapter.html"class='active'>Discover<p>Find out what TSA is</p></a></li> 
    <li><a href="classes_at_harriton.html">Learn<p>Learn about STEM class at Harriton</p></a></li> 
    <li><a href="http://webmaster.tsaprotectandserve.com">Explore<p>Jump into the world of Web Design</p></li> 
    </ul> 
</div>

CSS

#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; 
}

的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插件色彩的动画色彩。感谢您提前提供任何帮助。

来源

2014-03-29 xinkecf35

其同步问题的？在过去我有这样一个问题，我用stop方法jQuery中

$("#toggle").on("click", function() { $block.stop().slideToggle(1000); });

它只是一个例子，但将帮助ü得到同步动画

Example here

来源

2014-03-30 00:00:45

使用Jquery做动画之后需要重置原始样式吗？

回答

相关问题