Question

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

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

Answer 1

它是一个同步问题？在过去我有这样的问题，我在jquery中使用stop方法

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

它只是一个例子，但可以帮助你获得同步动画

Example here

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

1 个答案: