jQuery fadeOut 不改变显示属性

发布于 2024-11-14 02:40:55 字数 742 浏览 3 评论 0原文

在 http://judi.simpleupdates.com/ 上，我尝试使用以下方法在页面上制作图像幻灯片jQuery fadeIn 和 fadeOut 效果。这两个项目fadeIn都没有问题。但是，fadeOut 并没有更改应该消失的 div 的 display 属性。有什么想法为什么这可能无法按预期工作吗？

这是失败的行：

$( ".carousel_item:nth-child(" + selected + ")" ).fadeOut(600);

更新： 问题似乎出在没有 width 和 的元素上的 fadeOut >高度。将值添加到 div.carousel_item 的 width 和 height 属性时，fadeOut 调用可以正常工作。另一种方法是从后代 img 中删除 position:absolute，从而使 div 增长到 img 尺寸。

原文

On http://judi.simpleupdates.com/ I am attempting to make a slideshow of images on a page using the jQuery fadeIn and fadeOut effects. Both items fadeIn without issue. However, fadeOut is not changing the display property of the div that is supposed to disappear. Any ideas why this might not be working as expected?

This is the line that is failing:

$( ".carousel_item:nth-child(" + selected + ")" ).fadeOut(600);

UPDATE: The issue seems to be with fadeOut on a element that does not have a width and height. When values are added to the width and height properties of div.carousel_item the fadeOut call works properly. Another method is to remove position: absolute from the descendant img causing the div to grow to the img dimensions.

分享到QQ

分享到微博

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

发布评论

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

蹲墙角沉默 2024-11-21 02:40:55

问题似乎在于没有 width 和 height 的元素上的 fadeOut。当将值添加到 div.carousel_item 的 width 和 height 属性时，fadeOut 调用可以正常工作。另一种方法是从后代 img 中删除 position:absolute，从而使 div 增长到 img 尺寸。

感谢您的所有帮助和建议！

回复收藏 0 原文

℡Ms空城旧梦 2024-11-21 02:40:55

难道你只需要在 jQuery 选择器中将当前变量和选定变量相互替换吗？当我理解正确时，您想要淡出当前并淡入所选内容，不是吗？

回复收藏 0 原文

傲影 2024-11-21 02:40:55

~~将 HTML 中的显示设置更改为~~

应正确触发淡入/淡出。< /del>

您可能还需要将 jQuery 更改为：
$( ".carousel_item:nth-child(" + selected + ")" ).fadeOut(600).hide();

~~您正在调用 fadeIn/fadeOut均设置为 display: block 的项目。它需要交替状态才能工作。~~

更新
下载站点的本地副本后，将 js 中的 showhide() 函数更改为：

var inc = 1
function showhide(current) {
    if (inc == 1) current = 2;
    $( ".carousel_item:nth-child(" + selected + ")" ).fadeIn(600);
    $( ".carousel_item:nth-child(" + current + ")" ).fadeOut(600).hide();
    selected = current;
    inc++;
}

在我的测试中有效。希望它对你有用。我添加了计数器，因为您的初始计数似乎将 selected 和 current 设置为 1。

~~Changing the display setting in the HTML to <div id="txt2" class="carousel_item" style="display: none; "> should trigger the fadeIn/fadeOut correctly.~~

You may also need to change the jQuery to:
$( ".carousel_item:nth-child(" + selected + ")" ).fadeOut(600).hide();

~~You're calling fadeIn/fadeOut on items that are both set to display: block. It needs alternate states in order to work.~~

UPDATE
After downloading a local copy of your site, changing the showhide() function in your js to:

var inc = 1
function showhide(current) {
    if (inc == 1) current = 2;
    $( ".carousel_item:nth-child(" + selected + ")" ).fadeIn(600);
    $( ".carousel_item:nth-child(" + current + ")" ).fadeOut(600).hide();
    selected = current;
    inc++;
}

works in my testing. Hopefully, it works for you. I added the counter as your initial count seems to set both selected and current to 1.

回复收藏 0 原文

~没有更多了~