所以,最近我正在尝试使用这个名为Transit(http://ricostacruz.com/jquery.transit/)的插件,它是一个不错的插件......但是当我试图在网页上使用它时,它就无法工作。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>TestLP</title>
<link href="styles/default.css" rel="stylesheet" type="text/css">
<script src="styles/transit.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
</head>
<body>
<div id="header-wrapper">
<div id="header" class="container">
<div id="logo"><img src="images/Logo ACEXLANDING PAGE1_.png" alt="ACEX 2014">
<span>Companionship in diversity for a peaceful living</span>
</div>
<div id="sbuttoncont">
<div class="SButton" id="sb1">Home</div>
<div class="SButton" id="sb2">Competition</div>
<div class="SButton" id="sb3">Score</div>
<div class="SButton" id="sb4">Partners</div>
<div class="SButton" id="sb5">Contact Us</div>
</div>
</div>
</div>
<script>
$(function() {
$(".SButton").mouseover( function(){
$(this).transition({ x:'10px' },500) .css('opacity','0.9');
});
$(".SButton").mouseout( function(){
$(this).transition({ x:'0px' },500) .css('opacity','1');
});
});
</script>
</body>
</html>
这是SButton的css
.SButton
{
display: block;
background: #F27D81;
margin-top: 1em;
padding: 1em 1.5em;
letter-spacing: 0.20em;
text-decoration: none;
font-size: 0.90em;
font-weight: 600;
text-transform: uppercase;
outline: 1px;
color: #FFF;
opacity:1;
position:relative;
}
谢谢