[英]Need to reset original style after doing animation with Jquery?
我一直在研究一个简单的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;
}
Java脚本
//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方法
$( "#toggle" ).on( "click", function() { $block.stop().slideToggle( 1000 ); });
它只是一个示例,但将帮助您获取同步动画
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.