-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

检查 jsFiddle 中的库。该框架可能是不必要的，但如果你想要它，你必须通过将http://ricostacruz.com/jquery.transit/jquery.transit.min.js添加到“添加资源部分”transition来确保它包含在 jsFiddle 中”。此外，它似乎只适用于早期版本的 jQuery 而不是 v1.8.2 最新版本。否则你的代码很好。试试这个演示。

于 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 回答
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 回答