-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

DOM が完全に読み込まれるまで待機する必要があるため、コードを jQuery.ready() 関数内にラップする必要があります。

$(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 に答える