3

私はjqueryプラグインJquery Transitで遊んでいます：http://ricostacruz.com/jquery.transit/しかし、何をしても、コードは期待どおりに動作しません（実際のところ、全く動かない）

 <!DOCTYPE html>
<html>
<head>
  <style>
  div {
background-color:yellow;
width:100px;
border:1px solid blue;
position:absolute;
left:50px;
}

</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js'></script>
<script scr='jquery.transit.js'></script>
</head>

<title>test</title>
</head><body>
 <button id="go"> Run</button>
<div id="block">Hello!</div>

    <script>
$(function() {
    $("#go").click(
function(){
 $("#block").transition({ x: '90px' }, 1500 );
});
});
</script>
</body>
</html>

コードはまったく機能しません。比較する jquery アニメーション コードを追加しましたが、これは完全に正常に動作します。今、私はjquery 1.8がjqueryトランジットを壊したことを知っていますが、ここではjquery 1.7を使用しているので問題にはなりません。

私はここで途方に暮れています、誰か何かアイデアがありますか?

編集：

私はみんなの指示に従い、これを作成しました: http://web.uvic.ca/~markkoni/ 例はjsfiddleで機能するように見えますが、実際には機能しません。

4

3 に答える 3

2

実際のデモ (ローカルホストでもテスト済み): http://jsfiddle.net/fedmich/S2ube/

縮小されたスクリプトが機能していないようです。コードを次から変更します

http://ricostacruz.com/jquery.transit/jquery.transit.min.js

に

http://ricostacruz.com/jquery.transit/jquery.transit.js

また、JavaScriptを直接ホットリンクして自分のサイトに配置しないでください。後で彼のサイトがダウンしたときに、彼のサイトのjsを使用するとweb_appもダウンするためです。

はい、ページロードの後に​​コードを入れてください

$(function() {
    //your code here
});
于 2012-11-21T23:28:02.977 に答える
1

DOMを操作する前に、 jQuery対応ハンドラーで囲んでDOMが読み込まれていることを確認してください。

$(function(){
    $('#go').click(function(){
        $("#block").transition({x: '90px'}, 1500);
    });
});​

また、存在しない代わりにcssleftプロパティを使用することをお勧めします。x

div {    
    background-color: yellow;
    width: 100px;
    border: 1px solid blue;
    position: absolute;
    left: 50px;
}

これが実用的なフィドルです

また、スクリプトタグが次のようになっていることを確認してください。

<script type="text/javascript">

それ以外の

<script>

ノート ：

フィドルでjQuery1.7.2を使用していますが、 transitはまだtransit.jsと互換性がないようです。

于 2012-11-21T23:50:30.837 に答える
1

Transit は backgroundColor および color プロパティをサポートしています。例をチェックしてください: http://jsfiddle.net/PAnCh/

$(function() {
    $("#block").mouseenter(
    function(){
        $("#block").transition({ x: '+=90px', backgroundColor: '#cacaca', color: '#000' }, 1000 );
    });

    $("#block").mouseleave(
    function(){
         $("#block").transition({ x: '-=90px', backgroundColor: '#036', color: '#fff'  }, 500 );
    });
});
于 2013-04-06T10:34:09.107 に答える