tags:

views:

60

answers:

5
+1  Q: 

How to fade a div parent and it's respective childrens?

I'm currently trying to use jQuery to fade a particular div which contains a few other child divs. I tought it would work but I think there is more to that... Can anyone help me out what's the best way to fade all the elements of the parent div?

Currently using the following, but only the background of the parent div is fading and the childs are just hidden or shown without any fade for some reason.

$("#PopupView").fadeIn();
$("#PopupView").fadeOut();

HTML:

<!-- Popup View -->
            <div id="PopupView">
                <div class="numCont">
                    <div class="bgNum"></div>
                    <div class="bgNumAni"></div>
                    <div id="txtPageNumber" class="number">3</div>
                </div>
                <div class="bottomRectangle">PAGE</div>
                <div class="leftArrow"></div>
                <div class="rightArrow"></div>
            </div>

CSS:

#PopupView {
    position:absolute;
    top:53px;
    left:0px;
    width:604px;
    height:289px;
    z-index:99;
    background-image:url(../../res/drawable/list_bg.gif);
}

#PopupView .numCont {
    position:absolute;
    width:80px;
    height:80px;
    left: 256px;
    top: 85px;
}

#PopupView .numCont .number {
    position:absolute;
    width:80px;
    height:40px;
    font-family: Arial;
    font-size: 48px;
    font-weight: normal;
    text-align:center;
    color: #2884ff;
    top: 16px;
    left:0px;
}

#PopupView .numCont .bgNum {
    position:absolute;
    width:68px;
    height:68px;
    top: 6px;
    left: 6px;
    background-color:#0b0b0b;
}

#PopupView .numCont .bgNumAni {
    position:absolute;
    width:80px;
    height:80px;
    top: 0px;
    left: 0px;
    background-image:url(../../res/drawable/list_loadingBlocks_v1.gif);
    visibility:hidden;
}

#PopupView .bottomRectangle {
    position:absolute;
    width:68px;
    height:13px;
    left: 262px;
    top: 160px;
    font-family: Arial;
    font-size: 10px;
    font-weight: bold;
    text-align:center;
    letter-spacing:3px;
    color: #414141;
    background-color:#080808;
    padding-top:2px;
}

#PopupView .leftArrow {
    position:absolute;
    width:32px;
    height:31px;
    left: 11px;
    top: 124px;
    background-image:url(../../res/drawable/list_leftArrow_normal.png);
}

#PopupView .rightArrow {
    position:absolute;
    width:32px;
    height:31px;
    left: 562px;
    top: 124px;
    background-image:url(../../res/drawable/list_rightArrow_normal.png);
}
A: 

maybe this is what your looking for?

$("#PopupView").hide("slow");

to show it again use this:

$("#PopupView").show("fast");

reference is here: http://api.jquery.com/hide/

etoxin  2010-10-28 02:21:25
Thanks for the reply. Using hide() seems to tween the PopupView to the left top corner of the screen... I'm using a browser called Maple.
Moto  2010-10-28 02:33:27
try $("#PopupView").fadeOut("slow");
etoxin  2010-10-28 02:35:51
`.hide()` will do that. It should *still* hide the children. Does it do that? Does `$("#PopupView").css("display","none")` hide everything?
Jason  2010-10-28 02:45:58
@Jason, yes $("#PopupView").css("display","none") does hide everything
Moto  2010-10-28 03:16:27
@etoxin I have tried that and only the parent fades out and at the end of the fade the childs are hidden without any fading fx.
Moto  2010-10-28 03:17:34
I will an add an answer with what I you could try so it looks better than in a comment.
Jason  2010-10-28 03:18:10
+2  A:  
$("#PopupView").fadeOut("slow")

or

$("#PopupView").fadeOut(500)

You can change the value 500 to some other number to adjust the speed of fading

Shyju  2010-10-28 02:25:34
Only the parent background fades with this method not the childrens. It would be smart to point out that I'm using a browser called Maple and it stinks but I'm also new to JS so I'm not sure what is a bug and what's just me not doing things correctly....
Moto  2010-10-28 02:31:00
fadeOut will fades everything in the browser.I checked with IE,Firefox and it works.Hows it working in these browsers ?
Shyju  2010-10-28 02:39:34
Well the particular Maple browser is used by Samsung TVs and I was trying to build an app for the TV and this particular issue has appeared and since I'm also new to JS I thought maybe I'm doing something wrong....
Moto  2010-10-28 03:21:54
A: 

I should of seen this before. its because the child elements are:

position:absolute;

change them to: 

position:inline;

and the should fade.

etoxin  2010-10-28 03:00:51
You got me a little excited for a sec... :P Unfortunately I tried it same result the childs don't fade and at the end of the fade they are just hidden...
Moto  2010-10-28 03:13:59
do they fade with basic css no positioning?
etoxin  2010-10-28 03:28:35
like remove left:; right:; as well as position:;
etoxin  2010-10-28 03:29:13
A: 

As mentioned in your comments, the children are not staying hidden. Try this (though it is way more work than I would think you would have to do);

$("#PopupView").fadeOut(300, function(){ $(this).find("div").css("display","none");});

then on fade back in:

$("#PopupView").fadeIn(300, function(){ $(this).find("div").css("display","block");});

or you can use .css("visibility","hidden") and .css("visibility","visible")

Let me know what this does? Again, in most browsers

$("#PopupView").fadeOut(100);

would work just fine. Never messed with Maple.

EDIT:

Or better yet, try fading everything out explicitly:

$("#PopupView").fadeOut(100);
$("#PopupView div").fadeOut(100);

and their opposites. Something should get what you want!

Jason  2010-10-28 03:22:04
Thanks for the efforts to help me out! The issue is that the childrens are not fading together with the parent. At a fadeIn the childrens are just shown not faded in and at the fadeOut the childrens are just hidden at the end of the fade without them having any fading effect.
Moto  2010-10-28 03:27:15
Did you try my edit? Does it STILL do the same?
Jason  2010-10-28 03:28:46
A: 

made this, tested and works. 

<html>
<head>
<title>test</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript">
 $(document).ready(function()
    {
        $("#PopupView").bind('click', function(){
            alert("boom");
            $("#PopupView").fadeOut('slow');
        });
    })
    </script>
<style type="text/css" media="screen">
#PopupView {
    /*position:absolute;*/
    /*top:53px;*/
    /*left:0px;*/
    width:604px;
    height:289px;
    z-index:99;
    background:red;
}
#PopupView .numCont {
    /*position:absolute;*/
    width:80px;
    height:80px;
    /*left: 256px;*/
    /*top: 85px;*/
}
#PopupView .numCont .number {
    /*position:absolute;*/
    width:80px;
    height:40px;
    font-family: Arial;
    font-size: 48px;
    font-weight: normal;
    text-align:center;
    color: #2884ff;
    /*top: 16px;*/
    /*left:0px;*/
}
#PopupView .numCont .bgNum {
    /*position:absolute;*/
    width:68px;
    height:68px;
    /*top: 6px;*/
    /*left: 6px;*/
    background-color:#0b0b0b;
}
#PopupView .numCont .bgNumAni {
    /*position:absolute;*/
    width:80px;
    height:80px;
    /*top: 0px;*/
    /*left: 0px;*/
    background-image:url(../../res/drawable/list_loadingBlocks_v1.gif);
    visibility:hidden;
}
#PopupView .bottomRectangle {
    /*position:absolute;*/
    width:68px;
    height:13px;
    /*left: 262px;*/
    /*top: 160px;*/
    font-family: Arial;
    font-size: 10px;
    font-weight: bold;
    text-align:center;
    letter-spacing:3px;
    color: #414141;
    background-color:#080808;
    padding-/*top:2px;*/
}
#PopupView .leftArrow {
    /*position:absolute;*/
    width:32px;
    height:31px;
    /*left: 11px;*/
    /*top: 124px;*/
    background-image:url(../../res/drawable/list_leftArrow_normal.png);
}
#PopupView .rightArrow {
    /*position:absolute;*/
    width:32px;
    height:31px;
    /*left: 562px;*/
    /*top: 124px;*/
    background-image:url(../../res/drawable/list_rightArrow_normal.png);
}
</style>
</head>
<body>
<!-- Popup View -->
<div id="PopupView">
    <div class="numCont">
        <div class="bgNum">
        </div>
        <div class="bgNumAni">
        </div>
        <div id="txtPageNumber" class="number">
            3
        </div>
    </div>
    <div class="bottomRectangle">
        PAGE
    </div>
    <div class="leftArrow">
    </div>
    <div class="rightArrow">
    </div>
</div>
</body>
</html>
etoxin  2010-10-28 05:09:04

related questions

What JavaScript patterns do you use most?
Javascript events
What style do you use for creating an "class" in JavaScript?
Graphing JavaScript Library
What's the difference in closure style
Getting the text from a drop-down box
How to specify javascript to run when ModalPopupExtender is shown
Length of Javascript Associative Array
How Do I Post and then redirect to an external URL from ASP.Net?
How to set up a CSS switcher in ASP.NET
Wrapping lists into columns
Javascript keyboard events primer? (or rather: help me with my custom dropdown)
Http Auth in a Firefox 3 bookmarklet
Best Debugging Tools for JavaScript/xulrunner Development
How can I turn a string of HTML into a DOM object in a Firefox extension?
Call ASP.NET Function From Javascript?
Javascript troubleshooting tools in IE
MAC addresses in JavaScript
Capturing TAB key in text box
CSS Background Color in Javascript
How can I make the browser see CSS and Javascript changes?
Triple Quotes? How do I delimit a databound Javascript string parameter in ASP.NET?
ASP .Net Custom Client-Side Validation
What JavaScript library would you choose for a new project and why?
Detecting font in JavaScript