Question

这是在扼杀我。我花了两天的时间来完成这项工作。

最终，我想要实现的是有3个项目的列表，“Light”，“Regular”和“Deep”触发与列表中每个项目匹配的特定div的淡入。我正在使用z-index将div放在背景div之上。

因此，当我点击“Light”时，图像会在背景div上方淡入淡出，如果在点击时看到“Regular”或“Deep”，它们会淡出（只有1会在时间无论如何）。

基本上，jQuery的设置如下：

$('#main_right_line_one').click(function(){
    $('#main_regular_layover, #main_deep_layover').fadeOut('slow', function(){
        $('#main_light_layover').fadeIn('slow');
    });
});

$('#main_right_line_two').click(function(){    
    $('#main_light_layover, #main_deep_layover').fadeOut('slow', function(){
        $('#main_regular_layover').fadeIn('slow');
    });
});

$('#main_right_line_three').click(function(){
    $('#main_light_layover, #main_regular_layover').fadeOut('slow', function(){
        $('#main_deep_layover').fadeIn('slow');
    });
});

我的html设置如下：

<div id="main_container">
          <div id="main_top_left">
          </div>
          <div id="main_top_right">
                <a id="main_right_line_one" href="#">Light</a><br />
                <a id="main_right_line_two" href="#">Regular</a><br />
                <a id="main_right_line_three" href="#">Deep</a>
          </div>
          <div id="main_bottom">
          </div>
          <div id="main_light_layover">
                <img class="light_layover" src="/images/light_layover.png" />
          </div>

我的CSS：

#main_light_layover
{
    display:none;
    position:absolute;
    width:900px;
    margin:0 auto;
    padding:0px;
    border:0px;
    top:0px;
    left:0px;
    z-index:8;
    overflow:visible;
}

.light_layover
{

    position:relative;
    top:10px;
    left:-60px;
    z-index:8;
}

我的jQuery不是很好，但这根本不起作用。我想知道它是否有问题，因为点击的目标是在第二个div内？

我开始玩它更多，看看我是否可以让一些更简单的工作，比如正常加载图像并使用jQuery在点击时淡出它，但我甚至无法让它在我的特定工作上工作页面，但我可以获得一个准系统版本来处理jsFiddle：

http://jsfiddle.net/UpX3L/197/

在我的特定页面上，似乎根本无法获得淡入淡出的目标。任何人都可以提供一些见解吗？

编辑 - 这是一个jsFiddle以我希望页面工作的方式工作：

http://jsfiddle.net/3XwZv/507/

Answer 1

删除点击功能中的e

$('#main_right_line_one').click(function(){
$('#regular_layover, #deep_layover').fadeOut('slow', function(){
    $('#main_light_layover').show('slow');
});
});

$('#main_right_line_two').click(function(){    
$('#light_layover, #deep_layover').fadeOut('slow', function(){
    $('#regular_layover').fadeIn('slow');
});
});

 $('#main_right_line_three').click(function(){
$('#light_layover, #regular_layover').fadeOut('slow', function(){
    $('#deep_layover').fadeIn('slow');
});
 });

Answer 2

正如您对帖子的评论所述，您的选择器已关闭。

#是用于id的前缀，.是用于类的前缀

因此，您希望选择$('.light_layover')，而不是$('#light_layover')。

此外，如果隐藏了div，则可能无法显示图像。那么也许您打算使用$('#main_light_layover')而不是仅仅使用'light_layover'？

编辑：查看代码......在运行$(selector)之前，您需要确保选择器中的元素已经加载到DOM中。您可以通过$(document).ready(initialize)执行此操作，其中initialize是设置点击处理程序的功能。

请参阅jQuery.load和jQuery.ready

似乎无法在我的页面上使jQuery onClick fadeOut工作

2 个答案: