首先感谢您接受我加入团队。我需要帮助解决一个关于jQuery动画的问题。这是我在这个模板的导航菜单中的项目上发现的一个动画,模板怪物。
http://www.templatemonster.com/demo/40492.html
显然,这是两幅在画布上移动并在某个时刻逐渐褪色的图像。
通过研究jQuery的示例,我看到部分效果是通过使用动画属性top(css)获得的。但不幸的是,我设置动画的元素并没有像链接中显示的那样逐渐消失。
请帮助我了解如何使用jQuery来达到同样的效果。
您只需按照以下步骤进行即可。
CSS
@font-face {
font-family: 'Six Caps';
font-style: normal;
font-weight: 400;
src: local('Six Caps'), local('SixCaps'), url(http://themes.googleusercontent.com/static/fonts/sixcaps/v5/tMrhQDUBAHnnGuM33-yobPesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
.clear{clear:both;}
.nav{}
.menubox{width:200px;float:left;margin:0px 10px;height:80px;overflow:hidden;position:relative;font-family: 'Six Caps', sans-serif;line-height: 80px;color: #161616;font-size: 80px;color:#000;display:block;cursor:pointer;}
.menubox > span{width:100%;height:80px;display:block;position:absolute;text-align:center;}
.menubox > span.default-txt{top:0px;left:0px;}
.menubox > span.hover-txt{top:80px;left:0px;color:red;}
HTML
<div class="nav">
<a class="menubox">
<span class="default-txt">menu</span>
<span class="hover-txt">menu</span>
</a>
<a class="menubox">
<span class="default-txt">menu</span>
<span class="hover-txt">menu</span>
</a>
<a class="menubox">
<span class="default-txt">menu</span>
<span class="hover-txt">menu</span>
</a>
<a class="menubox">
<span class="default-txt">menu</span>
<span class="hover-txt">menu</span>
</a>
<div class="clear"></div>
</div>
jQuery
$(document).ready(function(){
$('.menubox').mouseenter(function(){
$(this).children('.default-txt').stop(true,true).animate({top:'-100px'});
$(this).children('.hover-txt').stop(true,true).animate({top:'0px'});
}).mouseleave(function(){
$(this).children('.default-txt').stop(true,true).animate({top:'0px'});
$(this).children('.hover-txt').stop(true,true).animate({top:'100px'});
});
});
JSFiddle
工作演示
这里有一个简单的例子:http://jsfiddle.net/qtdtL/.请注意,带有"顶部"动画的元素具有位置:固定。
$("nav").click(function() {
var el = $(this);
var elTop = el.position().top == 0 ? "-70px" : "0";
el.animate({top: elTop});
});
基本上添加
div
{
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease; /* Safari */
}
第一个属性告诉什么样的变化应该在变化时被动画化,第二个属性告诉它应该花多长时间,第三个属性告诉时间,如果需要,还有第四个属性给它一个延迟