使用 jQuery 实现非常流畅的动画效果

发布于 2024-08-17 04:35:23 字数 311 浏览 3 评论 0原文

我在页面上设置了一些 jQuery，以便在用户单击链接时交换一些 DIV。 DIV 内部有 Flash 对象、段落和图像，当我单击链接将其交换出来时，效果并不完全...平滑。

这是我的代码：

$('#div').toggle('fast');
$('#anotherdiv').toggle('fast');

它有点卡在闪存对象上一小会儿，然后完全消失。有谁知道一个可以在 jQuery 中制作非常流畅的动画效果的插件吗？我看了一下 jQuery UI，但它对于我想要的功能来说似乎有点过分了。

干杯。 :)

原文

I have some jQuery set up on my page to swap out some DIVs when a user clicks a link. The DIVs have flash objects, paragraphs and images inside them and when I click the link to swap it out the effects aren't exactly... smooth.

This is my code:

$('#div').toggle('fast');
$('#anotherdiv').toggle('fast');

It kinda gets stuck on the flash object for a short while and then disappears completely. Does anyone know a plugin to make really smooth animated effects in jQuery? I took a look at jQuery UI but it seems a little overkill for what I want it for.

Cheers. :)

分享到QQ

分享到微博

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

发布评论

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

花桑 2024-08-24 04:35:23

这里的速度问题主要与Flash有关……您要求浏览器快速重新绘制视频，而不是浏览器擅长做的事情。我会考虑在隐藏之前隐藏 Flash 元素，并在其余部分之后显示它们，如下所示：

$(function(){
  $('#hideShowButton').toggle(function() {
    $('#div object, #anotherdiv object').hide();
    $('#div').toggle('fast');
    $('#anotherdiv').toggle('fast');
  }, function() {
    $('#div object, #anotherdiv object').show();
    $('#div').toggle('fast');
    $('#anotherdiv').toggle('fast');
  });
});

The speed problem here is mainly with flash...you're asking the browser to rapidly repaint a video, not something a browsers all that great at doing. I would consider hiding the flash elements before hiding, and show them after the rest, something like this:

$(function(){
  $('#hideShowButton').toggle(function() {
    $('#div object, #anotherdiv object').hide();
    $('#div').toggle('fast');
    $('#anotherdiv').toggle('fast');
  }, function() {
    $('#div object, #anotherdiv object').show();
    $('#div').toggle('fast');
    $('#anotherdiv').toggle('fast');
  });
});

回复收藏 0 原文