Question

最近我一直在玩这个名为Transit by Rico Sta的JQuery插件。 Cruz（http://ricostacruz.com/jquery.transit），我正在制作一个具有“固定”位置的菜单，所以当页面滚动菜单时也会滚动。添加“固定”位置后，Transit插件的动画将无效。这是滚动菜单的CSS的代码

#sbuttoncont
{
    display:inline-block;
    width:20%;
    float:right;
    padding-left: 7%;
    position:fixed;
}
#menu
{
}

#menu ul
{
    text-align: right;
}

#menu li
{
    display: block;
    position:relative;
}

#menu li a, #menu li span
{
    display: block;
    background: #FFC661;
    margin-top: 1em;
    padding: 1em 1em 1em 1em;
    letter-spacing: 0.20em;
    text-decoration: none;
    font-size: 0.8em;
    text-transform: uppercase;
    color: #FFF;
    opacity:1;
    width:80%;
}

#menu li:hover a
{
}

#menu li.active a, #menu li.active span
{
}

#menu .current_page_item a
{
    background: #D99827;
    color: #FFF;
}

如你所见，我添加'postion：fixed;'在'#sbutton'中，'＃menu'在里面，这里是HTML代码

<div id="sbuttoncont">
    <div id="menu">
        <ul>
            <li class="current_page_item"><a href="#" accesskey="1" title="">Home</a></li>
            <li class="sbt"><a href="index2.html" accesskey="2" title="">Competitions</a></li>
            <li class="sbt"><a href="index3.html" accesskey="3" title="">Scores</a></li>
            <li class="sbt"><a href="index4.html" accesskey="3" title="">Merchandise</a></li>
            <li class="sbt"><a href="index5.html" accesskey="4" title="">Partners</a></li>
            <li class="sbt"><a href="index6.html" accesskey="5" title="">Contact Us</a></li>
        </ul>
    </div>
</div>

这是动画的JQuery脚本

<script>
    $(function() {
        $(".sbt").mouseover(function() {
            $(this).transition({x: '-40px'}, 350);
        });
        $(".sbt").mouseout(function() {
            $(this).transition({x: '0px'}, 350);
        });
        $(".current_page_item").mouseover(function() {
            $(this).transition({x: '-40px'}, 350);
        });
        $(".current_page_item").mouseout(function() {
            $(this).transition({x: '0px'}, 350);
        });
    });
</script>

我想要实现的是使菜单与页面和工作动画一起滚动，而在鼠标悬停时，菜单按钮将移动到左侧40像素，非常感谢您的帮助。如果您需要完整的HTML

，请与我们联系

不要混淆，这是完整的HTML文档（使用.animate） http://fonts.googleapis.com/css?family=Press+Start+2P'rel ='stylesheet'type ='text / css'＆gt; html，身体 { 身高：100％; }

body
{
    margin: 0px;
    padding: 0px;
    background: #2DBCF6 url(images/BACKGROUND%20ACEX.jpg) fixed;
    font-family: 'Press Start 2P', cursive;
    font-size: 12pt;
    font-weight: 300;
    color: #000000;
    width:100%;
    z-index:999;
}


h1, h2, h3
{
    margin: 0;
    padding: 0;
}

p, ol, ul
{
    margin-top: 0;
}

ol, ul
{
    padding: 0;
    list-style: none;
}

p
{
    line-height: 180%;
}

strong
{
}

a
{
    color: #ff3e37;
}

a:hover
{
}
.container
{
    margin: 0px auto;
    width: 1000px;
}
.image
{
    display: inline-block;
}

.image img
{
    display: block;
    width: 100%;
}

.image-full
{
    display: block;
    width: 100%;
    margin: 0 0 3em 0;
}

.image-left
{
    float: left;
    margin: 0 2em 2em 0;
}

.image-centered
{
    display: block;
    margin: 0 0 2em 0;
}

.image-centered img
{
    margin: 0 auto;
    width: auto;
}
ul.style1
{
    margin: 0;
    padding: 0em 0em 0em 0em;
    overflow: hidden;
    list-style: none;
    color: #6c6c6c
}

ul.style1 li
{
    overflow: hidden;
    display: block;
    padding: 2.80em 0em;
    border-bottom: 1px solid;
    border-color:  rgba(0,0,0,.1);
}

ul.style1 li:first-child
{
    padding-top: 0;
    border-top: none;
}

ul.style1 .image-left
{
    margin-bottom: 0;
}

ul.style1 h3
{
    padding: 1.2em 0em 1em 0em;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    font-size: 1.2em;
    font-weight: 300;
    color: #454445;
}

ul.style1 a
{
    text-decoration: none;
    color: #525252;
}

ul.style1 a:hover
{
    text-decoration: underline;
    color: #525252;
}

ul.style2
{
    margin: 0;
    padding-top: 1em;
    list-style: none;
}

ul.style2 li
{
    border-bottom: 1px solid;
    border-color:  rgba(0,0,0,.1);
    padding: 0.80em 0;
}

ul.style2 li:first-child
{
    border-top: none;
    padding-top: 0;
}       
.title
{
    margin-bottom: 3em;
}

.title h2
{
    font-size: 2.8em;
    color: rgba(255,255,255,0.9);
}

.title .byline
{
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 1.1em;
    color: #6F6F6F;
}
#header-wrapper
{
    overflow: hidden;
    padding: 0em 0em;
}

#header
{
}
#logo
{
    padding: 0 0 0 3%;
    text-align: center;
    float:left;
    width:70%;
}

#logo h1
{
    display: inline;
    margin-bottom: 0.50em;
    padding: 0.20em 1em;
    background: #36C;
    font-size: 3.5em;
}

#logo a
{
    text-decoration: none;
    color: #FFF;
}

#logo span
{
    display: block;
    margin-top:1em;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    font-size: 0.9em;
    color: #000000;
    padding-top:0.3em;
}

#logo span a
{
    color: rgba(0,0,0,0.8);
}
#sbuttoncont
{
    display:inline-block;
    width:20%;
    float:right;
    padding-left: 7%;
    position:fixed;
}
#menu
{
}

#menu ul
{
    text-align: right;
}

#menu li
{
    display: block;
    position:relative;
}

#menu li a, #menu li span
{
    display: block;
    background: #FFC661;
    margin-top: 1em;
    padding: 1em 1em 1em 1em;
    letter-spacing: 0.20em;
    text-decoration: none;
    font-size: 0.8em;
    text-transform: uppercase;
    color: #FFF;
    opacity:1;
    width:80%;
}

#menu li:hover a
{
}

#menu li.active a, #menu li.active span
{
}

#menu .current_page_item a
{
    background: #D99827;
    color: #FFF;
}
#copyright
{
    overflow: hidden;
    padding: 0.3em 0.5em 0.3em 0.5em;
    background: #333333 url(images/DialogueBox1.png) center;
    margin-left: 3%;
    margin-right: 3%;
}

#copyright p
{
    letter-spacing: 0.20em;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.65em;
    color: #303030;
}

#copyright a
{
    text-decoration: overline underline;
    color: #323232;
}
#post
{
    overflow: hidden;
    width:69%;
    padding: 1em 0.3em 1em 0.3em;
    background: #333333 url(images/DialogueBox1.png) center;
    margin: 1em 0 1em 3%;
}
#post h2
{
    color: #303030;
    text-align:center;
}
#post img
{
    display:block;
    text-align: center;
    margin: auto;
}
#post p
{
    letter-spacing: 0.20em;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.65em;
    color: #303030;
}
</style>
<title>ACEX2014</title>
</head>
<body>
<div id="header-wrapper">
<div id="header">
<div id="logo">
<img src="images/logoacextransparent.png" alt="ACEX2014">
<span>Companionship in diversity for a peaceful living</span>
</div>
<div id="sbuttoncont">
    <div id="menu">
        <ul>
            <li class="current_page_item"><a href="#" accesskey="1" title="">Home</a></li>
            <li class="sbt"><a href="index2.html" accesskey="2" title="">Competitions</a></li>
            <li class="sbt"><a href="index3.html" accesskey="3" title="">Scores</a></li>
            <li class="sbt"><a href="index4.html" accesskey="3" title="">Merchandise</a></li>
            <li class="sbt"><a href="index5.html" accesskey="4" title="">Partners</a></li>
            <li class="sbt"><a href="index6.html" accesskey="5" title="">Contact Us</a></li>
        </ul>
    </div>
</div>
</div>
</div>
<div id="post">
<h2>About ACEX 2014</h2>
<p>ACEX adalah event tahunan SMP Labschool Kebayoran yang berupa rangkaian kompetisi. ACEX adalah kependekan dari 'Art, Culture and Sport Exhibition'. Acara ini mencakup kegiatan seni, kebudayaan dan olahraga seperti namanya.</p>
<p>ACEX tahun ini mengusung tema 'Arcade Games' dan panitia pelaksananya merupakan murid angkatan 12 SMP Labschool Kebayoran.</p>
<h2>Countdown To Opening</h2>
<img src="images/TBU.png" alt="To Be Unlocked!">
<h2>Trailer</h2>
<img src="images/TBU.png" alt="To Be Unlocked!">
</div>
<div id="copyright">
    <p>COPYRIGHT (C) <a href="http://acex2014.blogspot.com" rel="nofollow">ACEX2014.BLOGSPOT.COM</a>. ALL RIGHTS RESERVED | DESIGN BY <a href="http://twitter.com" rel="nofollow">@WirasutaTude</a></p>
</div>

<script>
$(function() {
  $(".sbt").mouseover(function() {
    $(this).animate({left: '-40px'}, 350);
  });
  $(".sbt").mouseout(function() {
    $(this).animate({left: '0px'}, 350);
  });
  $(".current_page_item").mouseover(function() {
    $(this).animate({left: '-40px'}, 350);
  });
  $(".current_page_item").mouseout(function() {
    $(this).animate({left: '0px'}, 350);
  });
});
</script>
</body>
</html>

注意：我是这些JQuery Stuff的新手，所以非常感谢您的帮助

Answer 1

您确定在脚本上方加载了JQuery（<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>）吗？

Answer 2

只需使用jQuery的animate函数，以类似的方式工作，并且更受支持：

    $(function() {
      $(".sbt").mouseover(function() {
        $(this).animate({left: '-40px'}, 350);
      });
      $(".sbt").mouseout(function() {
        $(this).animate({left: '0px'}, 350);
      });
      $(".current_page_item").mouseover(function() {
        $(this).animate({left: '-40px'}, 350);
      });
      $(".current_page_item").mouseout(function() {
        $(this).animate({left: '0px'}, 350);
      });
    });

我还创建了一个jsfiddle.net页面，因此您可以尝试使用该代码。

http://jsfiddle.net/sgruenwald/WL4T7/1/

固定位置不起作用的JQuery动画（Transit）

2 个答案: