1

我没有使用 jquery（或真正的 java 脚本）的经验，但试图img id=mike在页面加载时使图像（...）滑入。

在浏览了 jquery 文档并尝试了谷歌查询之后，我已经想出了这个

  $(document).ready(function() {

$("#mike").load(function () {
      $(this).show("slide", { direction: "up" }, 2000);

});

  });

并应用了 CSS display:hidden，使其保持隐藏状态，直到我希望它在页面加载时滑入。

除非我重新加载页面，否则这似乎不起作用。

希望有人可以帮助我解决这个问题：）

4

2 回答 2

2

.load()如果从缓存中检索图像，则不会触发，具体取决于浏览器，因此如果图像是 ，则需要手动触发事件complete，如下所示：

$(function() {
  $("#mike").one('load', function () {
    $(this).show("slide", { direction: "up" }, 2000);
  }).each(function() {
    if(this.complete) $(this).load();
  });
});

.one()确保事件只触发一次。循环通过.each()每个元素，在这种情况下只有一个，并且如果它已经complete（如果从缓存中获取，它将是）触发事件以确保它关闭（如果它已经触发，则.one()注意它不会滑入两次）。

于 2010-04-20T11:17:33.473 回答
0

@Dean，您最好结合使用 CSS 和 jQuery 来完成这项工作——这是为了解决图像缓存问题（请参阅 Nick 的回复以获取解释）。这是一个粗略的例子：

CSS：

#mike {
    display: block;
    margin: 0; padding: 0; /* Ignore this if you're using a reset.css */

    position: absolute;    /* Change this to relative based on the containing elements */
    top: 2000px;           /* Assumes you have an image that's 100px tall as an example */
}

jQuery：

jQuery( function(){
    $('#mike').animate({'top':'0'},255,'linear', function(){
        console.log('Done Animation);
    });
} );

您还可以在页面加载后将动画延迟几秒钟（或几毫秒）：

jQuery( function(){
    // Delay the animation by 1 second after page load before animating.
    $('#mike').delay(1000).animate({'top':'0'},255,'linear', function(){
        console.log('Done Animation);
    });
} );
于 2012-10-17T00:52:39.503 回答