我正在尝试制作图像动画(animate({left:'0'}, 500
);当我每次单击新闻通讯菜单项时。开头的图片在css中定义为隐藏,然后必须显示动画。
以下是代码段:
$(function() {
var
animation = function(href) {
var
name = "active",
element = $("a[href='" + href + "']"),
$target = $(href);
$("html, body").stop().animate({
scrollLeft: $target.offset().left
}, 1200);
element.closest("ul").find("li").removeClass(name);
element.parent().addClass(name);
$('#wrap').find('.shown').removeClass('shown');
$target.addClass('shown');
$('#wrap').find('.shown1').removeClass('shown1');
$target.addClass('shown1');
//text effect
$('#wrap').find('.load').removeClass('load');
$target.addClass('load');
//text translate
$('#wrap').find('.move').removeClass('move');
$target.addClass('move');
//animate hide and show image right to left
$('#myimage img3').animate({
left: '0'
}, 500)
},
menu = $("#list");
animation(menu.find("li").eq(0).find("> a").attr("href"));
$("#cssmenu a").bind("click", function(event) {
var target = $(this).attr("href");
animation(target);
//always want the fade? uncomment this:
//$('#cssmenu').find('img').css('opacity', 0);
//$(target).find('img').fadeTo(3000,1);
event.preventDefault();
});
$("#next, #prev").click(function(event) {
var
positionActiveClass = menu.find("> li.active").index(),
menuLength = menu.find("> li").length - 1,
buttonId = $(this).attr("id");
if (buttonId === "next") {
if (positionActiveClass === (menuLength)) {
newElementActiveClass = menu.find("li").eq(0);
newPositionActiveClass = newElementActiveClass.find("> a").attr("href");
animation(newPositionActiveClass);
} else {
newElementActiveClass = menu.find("li").eq(positionActiveClass + 1);
newPositionActiveClass = newElementActiveClass.find("> a").attr("href");
animation(newPositionActiveClass);
}
} else {
if (positionActiveClass === 0) {
newElementActiveClass = menu.find("li").eq(menuLength);
newPositionActiveClass = newElementActiveClass.find("> a").attr("href");
animation(newPositionActiveClass);
} else {
newElementActiveClass = menu.find("li").eq(positionActiveClass - 1);
newPositionActiveClass = newElementActiveClass.find("> a").attr("href");
animation(newPositionActiveClass);
}
}
event.preventDefault();
});
});
body {
width: 8000px;
margin: 0;
}
.panel {
width: 930px;
float: left;
padding-left: 30px;
padding-right: 1040px;
margin-top: 45px;
background: #eee;
}
#banner {
position: fixed;
}
#banner ul {
line-height: 45px;
margin: 0 30px;
padding: 0;
}
#banner ul li {
display: inline;
margin-right: 30px;
}
#wrap {
margin-top: 45px;
float: left;
}
#cssmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
width: 1366px;
position: relative;
display: block;
font-size: 12px;
font-weight: bold;
background: #f2f1f2;
font-family: Arial, Helvetica, sans-serif;
border-bottom: 1px solid #f2f1f2;
zoom: 1;
}
#cssmenu ul:before {
content: '';
display: block;
}
#cssmenu ul:after {
content: '';
display: table;
clear: both;
}
#cssmenu li {
display: block;
float: left;
margin: 0;
padding: 0 4px;
}
#cssmenu li a {
display: block;
float: left;
color: #797978;
text-decoration: none;
font-weight: bold;
padding: 10px 20px 7px 20px;
border-bottom: 3px solid transparent;
}
#cssmenu li a:hover {
color: #6c8cb5;
border-bottom: 3px solid #00b8fd;
}
#cssmenu li.active a {
display: inline;
border-bottom: 3px solid #00b8fd;
float: left;
margin: 0;
}
#cssmenu {
position: fixed;
}
.panel img {
opacity: 0;
-moz-transition: opacity 3000ms ease-in-out;
-webkit-transition: opacity 3000ms ease-in-out;
transition: opacity 3000ms ease-in-out;
}
.shown img {
opacity: 1;
}
.panel .img2 {
opacity: 0;
-moz-transition: opacity 3000ms 2s ease-in-out;
-webkit-transition: opacity 3000ms 2s ease-in-out;
transition: opacity 3000ms 2s ease-in-out;
}
.shown1 .img2 {
opacity: 1;
}
#test p {
opacity: 0;
font-size: 21px;
margin-top: 25px;
text-align: center;
-webkit-transition: opacity 5s ease-in;
-moz-transition: opacity 5s ease-in;
-ms-transition: opacity 5s ease-in;
-o-transition: opacity 5s ease-in;
transition: opacity 5s ease-in;
}
.load #test p {
opacity: 1;
}
#translate p {
left: 0px;
top: 200px;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
}
.move #translate p {
transform: translate(350px, 0);
-webkit-transform: translate(350px, 0);
-o-transform: translate(350px, 0);
-moz-transform: translate(350px, 0);
}
#myimage {
overflow: hidden;
position: relative;
}
#myimage .img3 {
postion: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cssmenu">
<ul id="list">
<li><a href="#home">Home</a></li>
<li><a href="#newsletter">Newsletter</a></li>
<li><a href="#directions">Directions & Opening Hours</a></li>
<li><a href="#contact">Contact us</a></li>
</ul>
<button id="prev">Previous</button>
<button id="next">Next</button>
</div>
<div id="wrap">
<div id="home" class="panel">
<h2>Home</h2>
<img src="http://lorempixum.com/200/200/people/3" />
<img class="img2" src="http://lorempixum.com/200/200/people/1" />
</div>
<div id="newsletter" class="panel">
<h2>Newsletter</h2>
<!--<img src="http://lorempixum.com/200/200/people/1"/>-->
<div id="myimage">
<img class="img3" src="http://lorempixum.com/200/200/people/1" />
</div>
</div>
<div id="directions" class="panel">
<h2>Directions</h2>
<!--<img src="http://lorempixum.com/200/200/people/2"/>-->
<div id="test">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div id="contact" class="panel">
<h2>Contact</h2>
<!--<img src="http://lorempixum.com/200/200/people/4"/>-->
<div id="translate">
<p>translate to right</p>
</div>
</div>
也许可以通过添加或删除类来使用CSS来完成,但我不知道如何做。我给你一个我要做的事的例子。
这是我的HTML结构:
<div id="newsletter" class="panel">
<h2>Newsletter</h2>
<div id="myimage">
<img class="img3" src="http://lorempixum.com/200/200/people/1"/>
</div>
</div>
我的CSS看起来像这样的图像:
#myimage {
overflow:hidden;
position:relative;
}
#myimage .img3 {
postion:absolute;
}
在我的Jquery函数中,我实现了以下脚本:
//animate hide and show image right to left
$('#myimage img3').animate({left:'0'}, 500);
使用