3

There is an animating effect in the " Featured Projects " part of this site here .

I'm trying to make that for my site and I actually did that at first about a month ago. But now surprisingly it is not working at all and just kind of ambiguous for me to figure that out what the issue could be.

Am I choosing the wrong library, is there a problem in my scripts, or is it a bug?

HTML.

      <a class="MainMiddleTwoEach MMTE1"  href="#" title="This is the title 1">
           <label class="MainMiddleTwoLabel1"></label>
           <span class="MainMiddleTwoLabel2"></span>    
      </a>

JS.

      $('.MainMiddleTwoEach').mouseenter(function (e) {
            pageId = $(this).attr('href');
            $(this).children('label').animate({ top: '150px' }, 300);
            $(this).children('label').animate({ top: '-100px' }, 300);
            $(this).children('span').animate({ top: '20px' }, 300);
            $(this).children('span').animate({ top: '230px' }, 300);
        }).mouseleave(function (e) {
            $(this).children('label').animate({ top: '130px' }, 300);
            $(this).children('label').animate({ top: '80px' }, 300);
            $(this).children('span').animate({ top: '-10px' }, 300);
            $(this).children('span').animate({ top: '55px' }, 300);
        });

http://jsfiddle.net/K4Ak2/3

4

2 に答える 2

8

、、またはプロパティを使用するには、要素の位置をrelativeまたはに設定する必要があります。absolutetoprightbottomleft

ここで私の編集をチェックしてください：http://jsfiddle.net/K4Ak2/4/

CSSに1行追加しました

label, span { position: relative; }

期待どおりに動作するはずです。

于 2013-03-15T10:12:25.020 に答える
3

Animate の jQuery API から: http://api.jquery.com/animate/

方向プロパティ (上、右、下、左) は、位置スタイル プロパティが静的 (デフォルト) である場合、要素に認識できる影響を与えません。

位置を「相対」に設定してみてください

于 2013-03-15T10:22:12.133 に答える