jquery 在页面加载时向下滑动图像

发布于 2024-08-30 01:51:23 字数 408 浏览 7 评论 0原文

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

在浏览了 jquery 文档并尝试了 Google 查询之后，我到目前为止已经想出了这个

  $(document).ready(function() {

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

});

  });

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

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

希望有人能帮我解决这个问题:)

原文

I'm not experienced with jquery (or java script really), but trying to make an image (img id=mike ...) slide in when a page loads.

After looking through the jquery docs and trying Google queries, I have so far come up with this

  $(document).ready(function() {

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

});

  });

And applied the CSS display:hidden so it remains hidden until I want it to slide in on page load.

This doesn't seem to work unless I reload the page though.

Hoping someone could help me out with this please :)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

荒岛晴空 2024-09-06 01:51:23

如果从缓存中检索图像，则不会触发 .load() ，具体取决于浏览器，因此如果图像完整，则需要手动触发该事件，例如this：

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

.one() 确保事件仅触发一次。 .each() 循环遍历每个元素，其中只有一个如果它已经完整（如果从缓存中获取的话）会触发该事件以确保它关闭（如果它已经触发，则.one() 小心翼翼地避免滑入两次）。

.load() isn't triggered if the image is retrieves from cache, depending on the browser, so you need to manually fire the event if the image is complete, like this:

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

The .one() ensures the event only fires once. The .each() loops though each element, only one in this case, and if it's already complete (which it would be if fetched from cache) fires the event to make sure it goes off (if it already fired, the .one() took care of it not sliding in twice).

回复收藏 0 原文

鹿港小镇 2024-09-06 01:51:23

@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);
    });
} );

@Dean, you'll probably be best off using a combination of CSS and jQuery to do the job--this is to get around caching issues with images (see Nick's response for an explanation). Here's a rough example:

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);
    });
} );

You can also delay the animation a few seconds (or milliseconds) after page load:

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);
    });
} );

回复收藏 0 原文

~没有更多了~