-1

フィドルを作成しました。jqueryアニメーションを作ろうとしていますが、リンクをクリックしても動きません。なんで？jquery トランジション プラグインを使用しています。

これが私のコードです

html

<header class="header"><a href="#" class="click">Click</a></header>
<section class="contents">
  <section class='home'>
    Hello akdjalskdjalskdjlasklasdjasljdasök
  </section>
</section>

CSS

.contents {
  width: 300px;
  height: 400px;
  border: 1px solid red;
}
.home {
  position: absolute;
  border: 1px solid green;
}

とjs

$('.click').click(function () {
      $('.home').transition({x: '+100px'}, function () {
        alert('completed');
      });
    });

アップデート

jqueryトランジションプラグインを使用しています

4

4 に答える 4

1

animateandleftの代わりにtransitionandを使用する必要がありますx。

$('.click').click(function () {
    $('.home').animate({left: '+100px'}, function () {
        alert('completed');
    });
});

デモ: <a href="http://jsfiddle.net/pesAA/15/" rel="nofollow">http://jsfiddle.net/pesAA/15/

于 2012-11-01T12:41:26.150 に答える
0

x水平軸に沿ってアニメーション化したいことから、これはうまくいくはずです：

$(document).ready(function() { 
  $('.click').click(function () {
    $('.home').animate({left: '+100px'}, function () {
      alert('completed');
    });
  });
});​

xこのコンテキストでtransitionは問題ではなく、不要であるため、現在のコードは機能しません。

あなたの jsFiddle は jQuery を参照していないため動作しませんが、代わりに Mootools を参照しています。

于 2012-11-01T12:43:23.913 に答える
0

jsFiddle でライブラリを確認してください。フレームワークは不要かもしれませんが、必要な場合は、 http: //ricostacruz.com/jquery.transit/jquery.transit.min.jsを「リソースの追加部分」に追加してtransition、jsFiddle に含まれていることを確認する必要があります。"。さらに、最新バージョンの v1.8.2 ではなく、以前のバージョンの jQuery でのみ動作するようです。そうでなければ、あなたのコードは問題ありません。このデモを試してください。

于 2012-11-01T12:53:56.427 に答える
0

これを試して：

<html>
<head>
<style>
.contents {
  width: 300px;
  height: 400px;
  border: 1px solid red;
}
.home {
  position: absolute;
  border: 1px solid green;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"     type="text/javascript"></script>
</head>
<body>
<header class="header"><span class="click">Click</span></header>
<section class="contents">
  <section class='home'>
    Hello akdjalskdjalskdjlasklasdjasljdasök
  </section>
</section>
</body>
<script> 
$('.click').on('click',function (evt) {
      $('.home').animate({left: '+100px'}, function () {
        alert('completed');
      });
    });
</script>
</html>

ご挨拶。

于 2012-11-01T13:01:45.007 に答える