Анимация JQuery (Transit) с фиксированной позицией не работает

Question

Анимация JQuery (Transit) с фиксированной позицией не работает

0

в последнее время я играл с этим плагином JQuery под названием Transit by Rico Sta. Круз (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 '> html, body {height: 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, поэтому ваша помощь действительно оценена

WirasT 04 янв. 2014, в 17:35

Источник

0

что сейчас не работает? Все вроде нормально
jmore009 04 янв. 2014, в 16:46

Теги:

jquery

html

css

position

animation

2 ответа

Ещё вопросы

что сейчас не работает? Все вроде нормально

DenisIsaychX · Answer 1 · 2014-01-04T16-08-00.000Z

Вы уверены, что загрузите JQuery (<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>) над своим скриптом?

я забыл вставить его выше, но я уже включил его и до сих пор не работает
@WirasT «Не работает» не является и никогда не будет описанием проблемы.

Stefan Gruenwald · Answer 2 · 2014-01-04T15-47-00.000Z

Просто используйте функцию анимации jQuery, работает аналогичным образом и более поддерживается:

    $(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/

Все еще не работает: / Я добавил полный HTML выше, может быть, что-то не так с другими элементами?