代码之家 › 专栏 › 技术社区 › TyTiKi

fadeOut()单个div覆盖多个div

fadeout fadein jquery

TyTiKi · 技术社区 · 12 年前

我有三个div和一个类“page”。对于每个div,都有一个“info”div,显示有关div的一些信息。

我想要实现的是,当我点击“页面”div下的一些文本时,它会变淡,“信息”会变淡。

即使我对jQuery几乎一无所知,我还是设法做到了。我的HTML是:

    <div id="content">

       <div class="page"><p class="click">Click me to open</p></div>
       <div class="info"><div class="closebut"></div></div>

       <div class="page"><p class="click">Click me to open</p></div>
       <div class="info"><div class="closebut"></div></div>

       <div class="page"><p class="click">Click me to open</p></div>
       <div class="info"><div class="closebut"></div></div>

    </div>

我的jQuery是:

    $(document).ready(function(){
    $(".info").hide();

    $("p.click").click(function(){ 
        $(".page").fadeOut("slow", function(){ $(".info").fadeIn(); });
    });

    $(".closebut").click(function(){
        $(".info").fadeOut("slow", function(){ $(".page").fadeIn(); });
    });
});

因此,当文档加载时,jQuery会隐藏“.info”div。当我点击段落“.点击”时,“.page”会淡出,在结尾处,“.info”会淡出。然后我有一个X作为关闭按钮的小图像(.closebut)。

一切都很好。但是,当我单击第一个“p”时,单击“EVERY”。page“将淡出,EVERY”.info“将淡出。

由于我需要5个或更多的“.page”+“.info”,每次在单个div中fadeOut/fadeIn最简单的方法是什么?

我的意思是,不需要在html中创建更多的类,也不需要扩展jQuery代码。。提前感谢您的帮助。

3 回复 | 直到 12 年前

kraYz 12 年前

将每个“div组”放在另一个div中。

<div class="parent">
       <div class="page"></div>
       <div class="info"><div class="closebut"></div></div>
       <div id="text"><p class="click">Click me to open</p></div>
</div>

jQuery(查询):

$("p.click").click(function(){ 
    $(this).parent().find(".page").fadeOut("slow", function(){ $(this).parent().find(".info").fadeIn(); });
});

这是我的主意。

Jeff-Meadows 12 年前

您可以使用jQuery的 next() 和 prev() 函数,以及 parent() .

$("p.click").click(function(){ 
    var p = $(this);
    p.parent().prev().prev(".page").fadeOut("slow", function(){ p.parent().prev(".info").fadeIn(); });
});

$(".closebut").click(function(){
    var but = $(this);
    but.parent(".info").fadeOut("slow", function(){ but.parent().prev(".page").fadeIn(); });
});

这是因为在事件处理程序内部, this 指的是被单击的元素。

Seder 12 年前

你需要得到 parent 以及 prev 元素,因此单击的项目为 this

检查这个 fiddle

$(document).ready(function(){

    $(".info").hide();

    $("p.click").click(function(){ 
        var ele = $(this); 
        $(this).fadeOut("slow", function(){
           $(this).parent().prev('.info').fadeIn(); });
    });

    $(".closebut").click(function(){
        $(this).parent().fadeOut("slow", function(){
            $(this).parent().prev('.page').fadeIn(); 

        });
    });
});

我希望这能有所帮助:)