使用 jquery 进行简单的淡入/淡出，值得吗？
我已阅读了您的所有回复并得出结论：这不是一个好主意。非常感谢，无论如何，多页要容易得多。
我正在建立一个网站，我不希望页面刷新。我的想法是，根据用户选择的导航链接，我将拥有 3 个相同大小的不同 div 淡入和淡出。
示例代码：（#about 是导航 div，#about_main 是主 div，依此类推）
$('#about a').click(function() {
$('#portfolio_main, #contact_main').fadeOut('fast', function() {
$('#about_main').delay(405).fadeIn();
});
});
//hide all divs that ren't on portfolio link
$('#portfolio a').click(function() {
$('#about_main, #contact_main').fadeOut('fast', function() {
$('#portfolio_main').delay(405).fadeIn();
});
});
$('#contact a').click(function() {
$('#about_main, #portfolio_main').fadeOut('fast', function() {
$('#contact_main').delay(405).fadeIn();
});
});
这被证明是一个问题，因为您可以单击 $('#about a') 100次，它将发射 100 倍。另外，如果我快速点击许多 a 标签，div 就会变得混乱。
示例：我的网站
我怎样才能让它轻松漂亮地淡入和淡出？当用户已经点击了点击时，有没有办法解除点击的绑定？有更简单的方法吗？
I have read all your responses and come to the conclusion that is a bad idea all together. Thank you very much, multiple pages is so much easier anyway.
I am building a website and I don't want the page to refresh. My idea was that I would have 3 different divs of the same size fade in and out depending the the nav link the user selected.
Example code: (#about is the nav div and #about_main is the main div, and so on)
$('#about a').click(function() {
$('#portfolio_main, #contact_main').fadeOut('fast', function() {
$('#about_main').delay(405).fadeIn();
});
});
//hide all divs that ren't on portfolio link
$('#portfolio a').click(function() {
$('#about_main, #contact_main').fadeOut('fast', function() {
$('#portfolio_main').delay(405).fadeIn();
});
});
$('#contact a').click(function() {
$('#about_main, #portfolio_main').fadeOut('fast', function() {
$('#contact_main').delay(405).fadeIn();
});
});
This proves to be a problem as you can click on the $('#about a') 100 times and it will fire 100x. Also, if I click on many a tags quickly, the divs get all messed up.
Example: My Site
How can I have it so that it fades in and out easily and nicely? Is there way to unbind the click when the user has already clicked it? Is there an easier way of doing this?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
虽然我同意 Robert 的观点，但您不应该这样做，但是，如果您被迫这样做，您可以在此处查看此示例： http://jsfiddle.net/xWu3C/2/
我没有把你的样式带过来或者什么，但原理是一样的。
While I agree with Robert that you should not do this, however, if you are compelled to do so you can check out this example here: http://jsfiddle.net/xWu3C/2/
I didn't bring your styles over or anything but the principle is is the same.
抛开以这种方式安排站点是否明智这一显而易见的问题——首先，您可能希望为容器设置固定的高度，这样就不会在转换之间获得跳跃效果。
至于重叠动画，你应该看看
.stop()Putting aside the obvious question of the wisdom of arranging your site this way -- first, you might want to set a fixed height for your container, so you don't get that jumping effect between transitions.
As to the overlapping animations, you should take a look at
.stop()我今天也面临类似的问题。我得出的结论是，有时华而不实的效果虽然很吸引人，但并不合适。特别是对于像您要应用效果的物体这样大的东西。我只是重定向到另一个页面。
我不确定您使用的是什么服务器端语言，但您的页面可以轻松地分为几个部分，以便您可以重复使用页眉和页脚，即 Asp.net 母版页。
I was facing a similar issue today as well. I came to the conclusion that sometimes flashy effects, though appealing, are just not appropriate. Especially for something as large as what you are applying the effects to. I would just redirect to another page.
I am not sure what server-side language you are using but your page can easily be separated into sections so that you can re-use the header and footer, i.e. Asp.net master pages.
这个问题的标题是“值得吗？”所以我将解决这个问题，而不是问题正文中提出的“如何做”。答案是：不，请不要破坏互联网。
The title of this questions asks "is it worth it?" so I will address that rather than "how to" posed in the question body. The answer is: No, please don't break the internet.