-2

我已将以下代码添加到我的 index.php 和 template.css。我看到图像但没有动画，我在这里错过了什么愚蠢的东西吗？

谢谢

**inside <head> tag**

</style>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
 </script>
<script>
var left = $(window).width() - $('#about').offset().left;
$("#about").animate({
opacity: 0.60,
left: left,
}, 5000, function () {
// Animation complete.
});
</script>

**inside <body> tag**

<div id="about"> <a href="http://www.google.co.uk" title="about">
<img src="images/models/about.png" alt="news" width="75" height="150" /></a>
</div>

**Inside css**

#about {
width: 50px;
height: 50px;
position: absolute;
top: 400px;
right: 300px;
 background: transparent;
}
4

2 回答 2

2

将代码包含在内$(document).ready()，因为您必须等待 dom 元素准备好

<script>
$(document).ready(function(){
  var left = $(window).width() - $('#about').offset().left;
  $("#about").animate({
    opacity: 0.60,
    left: left,
  }, 5000, function () {
      // Animation complete.
  });
});
</script>
于 2013-09-23T20:48:13.240 回答
1

需要将代码包装在 jQuery.ready() 函数中，因为您必须等待 DOM 完全加载。

$(function() {

    var left = $(window).width() - $('#about').offset().left;
    $("#about").animate({
        opacity: 0.60,
        left: left,
        }, 5000, function () {
            // Animation complete.
   });

});


$(function() {

    var left = $(window).width() - $('#about').offset().left;
    $("#about").animate({
        opacity: 0.40,
        left: left,
        }, 2000, function () {
            // Animation complete.
   });

});
#about {
width: 50px;
height: 50px;
position: absolute;
top: 50px;
right: 100px;
 background: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="about"> <a href="http://www.google.co.uk" title="about">
  <img src="http://www.daralmarjaan.com/images/about.png" alt="news" width="75" height="75" /></a>
</div>

于 2013-09-23T20:47:54.580 回答