Плагин jQuery Transit: нужен совет

Итак, в последнее время я пытаюсь использовать этот плагин под названием 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>

И это CSS для SButton

    .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;
}

Спасибо

Источник

0 ответов

Другие вопросы по тегам