结合使用不同触发器淡入/淡出多个对象

时间：2014-01-12 23:20:10

标签： jquery html fade

这是我的HTML。我试图用“display：none;”创建或/改编一个jquery脚本来淡化div。单击触发器时。 Div为“projectx_container”（x为1,2和3），触发器为“projectx_thumb”（x为1,2和3）。然后我想要一个单独的关闭按钮来淡出div。

同时尝试为li元素a，b和c实现相同的功能，作为触发器，div为“x_container”（x为a，b和c）。 a href仅用于模仿光标链接效果。

<div id="container">
        <div id="content_area">

            <div id="project1_thumb"><a href=""><img src=""></a></div>
            <div id="project2_thumb"><a href=""><img src=""></a></div>
            <div id="project3_thumb"><a href=""><img src=""></a></div>

            <!-- HIDDEN PROJECT PAGES -->
            <div id="project1_container"></div>
            <div id="project2_container"></div>
            <div id="project3_container"></div>

            <!-- HIDDEN MENU PAGES -->
            <div id="a_container"></div>
            <div id="b_container"></div>
            <div id="c_container"></div>

        </div>
        <div id="nav_area">
            <div id="nav">
                <ul>
                    <li><a href="#">a</a></li>
                    <li><a href="#">b</a></li>
                    <li><a href="#">c</a></li>
                    <li><a href="#">d</a></li>
                </ul>
            </div>
        </div>
</div>

我一直试图改变的脚本没有成功，它似乎适用于一个div，但我不知道如何让它适用于多种组合或li元素：

<script>
$(document).ready(function(){ 
  $("#project1_thumb").click(function() { 
    $("#project1_container").fadeIn("250");
  });

  $("#close_project1").click(function() { 
    $("#project1_container").fadeOut("250"); 
  });
});
</script>

这是一些添加的CSS。不是最终版本，但它与我计划使用的非常相似。

#container {
position: fixed;
display: block;
top:10px;left:10px;right:10px;bottom:10px;
vertical-align: center;
background: -webkit-linear-gradient(#FDC0B1, #EAA6C9); /* For Safari */
background: -o-linear-gradient(#FDC0B1, #EAA6C9); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#FDC0B1, #EAA6C9); /* For Firefox 3.6 to 15 */
background: linear-gradient(#FDC0B1, #EAA6C9); /* Standard syntax (must be last)*/ 

}

#project1_thumb {
float: left;
background-color: #ccc;
display: block;
width: 200px;
height: 200px;
margin: 20px;
}

#project2_thumb {
float: left;
background-color: #ccc;
display: block;
width: 200px;
height: 200px;
margin: 20px;
}

#project3_thumb {
float: left;
background-color: #ccc;
display: block;
width: 200px;
height: 200px;
margin: 20px;
}

#project1_container {
z-index: 900;
display: none;
position: fixed;
top:0px;left:0px;right:0px;bottom:0px;
vertical-align: center;
}

#project2_container {
z-index: 900;
display: none;
position: fixed;
top:0px;left:0px;right:0px;bottom:0px;
vertical-align: center;
}

#project3_container {
z-index: 900;
display: none;
position: fixed;
top:0px;left:0px;right:0px;bottom:0px;
vertical-align: center;
}

#a_container {
z-index: 900;
display: none;
position: fixed;
top:0px;left:0px;right:0px;bottom:0px;
vertical-align: center;
}

#b_container {
z-index: 900;
display: none;
position: fixed;
top:0px;left:0px;right:0px;bottom:0px;
vertical-align: center;
}

#c_container {
z-index: 900;
display: none;
position: fixed;
top:0px;left:0px;right:0px;bottom:0px;
vertical-align: center;
}

#nav_area {
clear: both;
display: block;
}

#navbar {
position: relative;
font-style: italic;
bottom: 35px;
}

#navbar a {
color: #381cdf;
text-decoration: none;
}

#navbar a:hover {
background-color: #fff;
}

#nav ul {
list-style: none;
}

#nav li {
display: inline;
margin-right: 15px;
margin-left: 15px;
font-size: 1.5em;
}

1 个答案:

答案 0 :(得分：0)

要改进的几件事。

  • 使用类！它们可以节省时间并使一切变得更轻松。而不是重复相同的代码三次，而是将类应用于每个元素。它还使用jQuery选择器，因为我可以使用一个$('.thumb').click而不是三个$('#project1_thumb').click。
  • 使用data-attributes 。它们可以方便地存储click事件将要使用的元素名称，也可以减少必须编写的代码量。
  • 避免使用position:fixed ，除非您真的希望它同时位于同一个地方，我发现您使用的代码很难找到。

无论如何，这是我为你改进的完整代码

/* HTML */
<div id="container">
    <div id="content_area">
        <div class='thumb' data-container='project1_container'><a href="#"><img src="/images/1"/></a>
        </div>
            <div class='thumb' data-container='project2_container'><a href="#"><img src="/images/2"/></a>
        </div>
            <div class='thumb' data-container='project3_container'><a href="#"><img src="/images/3"/></a>
        </div>

        <!-- HIDDEN PROJECT PAGES -->
        <div id="project1_container" class='container'>
            Proj 1
            <div class='close'>X</div>
        </div>
        <div id="project2_container" class='container'>
            Proj 2
            <div class='close'>X</div>
        </div>
        <div id="project3_container" class='container'>
            Proj 3
            <div class='close'>X</div>
        </div>

        <!-- HIDDEN MENU PAGES -->
        <div class='container'></div>
        <div class='container'></div>
        <div class='container'></div>
    </div>
    <div id="nav_area">
        <div id="nav">
            <ul>
                <li><a href="#">a</a></li>
                <li><a href="#">b</a></li>
                <li><a href="#">c</a></li>
                <li><a href="#">d</a></li>
            </ul>
        </div>
    </div>
</div>

/* CSS */
#container {
    position: fixed;
    display: block;
    top:10px;
    left:10px;
    right:10px;
    bottom:10px;
    vertical-align: center;
    background: -webkit-linear-gradient(#FDC0B1, #EAA6C9);
    /* For Safari */
    background: -o-linear-gradient(#FDC0B1, #EAA6C9);
    /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#FDC0B1, #EAA6C9);
    /* For Firefox 3.6 to 15 */
    background: linear-gradient(#FDC0B1, #EAA6C9);
    /* Standard syntax (must be last)*/
}
.thumb { 
    float: left;
    background-color: #ccc;
    display: block;
    width: 200px;
    height: 200px;
    margin: 20px;
    position:relat
}
.container {
    z-index: 9;
    display: none;
    position: fixed;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    vertical-align: center;
}
#nav_area { clear: both; display: block; }
#navbar {
    position: relative;
    font-style: italic;
    bottom: 35px;
}
#navbar a { color: #381cdf; text-decoration: none; }
#navbar a:hover { background-color: #fff; }
#nav ul { list-style: none; }
#nav li {
    display: inline;
    margin-right: 15px;
    margin-left: 15px;
    font-size: 1.5em;
}

.close { position:absolute; right:0; top:0; }

/* jQuery */
$(document).ready(function () {
    $(".thumb").click(function () {
        var id = $(this).data('container');
        $('#' + id).fadeIn("250");
    });
    $(".close").click(function () {
        $(this).parent().fadeOut("250");
    });
});

Demo

如果您有任何疑问，请随时询问

相关问题
最新问题