Question

我创建了fiddle。我正在尝试制作jquery动画但是当我点击链接时它不会移动。为什么？我正在使用jquery transition插件。

这是我的代码

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 transition插件

Answer 1

您需要使用animate和left代替transition和x：

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

DEMO： http://jsfiddle.net/pesAA/15/

Answer 2

从x想要沿水平轴设置动画，然后this should work for you：

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

您当前的代码无法使用，因为x在此上下文中不是一件事，transition是不必要的。

你的jsFiddle不会工作，因为它不引用jQuery，而是引用Mootools。

Answer 3

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

Answer 4

试试这个：

<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>

问候。

div在jquery中没有动画。为什么？

4 个答案: