开发者

jquery fade content

开发者 https://www.devze.com 2022-12-11 14:44 出处:网络
I have navigation menu that once the user click then change and fade the content. The problem is even the child node became hidden. If I remove all the child node of my div id=\"witness\" and id=\"bel

I have navigation menu that once the user click then change and fade the content. The problem is even the child node became hidden. If I remove all the child node of my div id="witness" and id="believe" then it works fine. How to exclude child node of div id="witness" or id="believe"?

Thanks in advance.

here is my javascript

 $(function(){
    $("#content-linkwrap .hrefmenu").click(function(){

        $clicked = $(this);
        // if the button is not already "transformed" AND is not animated

            // each button div MUST have a "xx-button" and the target div must have an id "xx" 
            var idToLoad = $clicked.attr("id").split('-');

            //we search trough the content for the visible div and we fade it out
            $("#description").find("div:visible").fadeOut("fast", function(){
                //once the fade out is completed, we start to fade in the right div
                $(this).parent().find("#"+idToLoad[0]).fadeIn();
            })

    });
});

here is my html

 <div align="center" id="content-linkwrap"><a href="#" class="link-black hrefmenu" id="witness-href">WITNESS</a><a href="#" class="link-black hrefmenu" id="believe-href">BELIEVE</a></div>

        <div id="description">
            <div id="witness" class="desc">            
                <div class="top"><div class="bottom"><div class="left"><div class="right"><div class="bl"><div class="br"><div class="tl"><div class="tr">  
                    <div style="padding: 40px 20px;">
                        <h3 class="text-orange">WITNESS</h3>
                        <p class="aboutus wpad10" align="justify">To a company that has initiated major retail projects representing more than US $10 million in investments.
                        </p>
                        <p class="aboutus" align="justify">To a conglomerate so solid and expansive with far-reaching business interests and investments in food service, real estate, electronics, heavy equipment, jewelry trading, travel, and hardware trading that spans the Philippines, Hong Kong, Singapore and Malaysia. </p>                
                    </div>                    
                    <div class="clearleft"></div>
                </div></div></div></div></div></div></div></div> 
            </div>

            <div id="believe" class="desc">                
                <div class="top"><div class="bottom"><div class="left"><div class="right"><div class="bl"><div class="br"><div class="tl"><div class="tr">  
                    <div style="pad开发者_JAVA技巧ding: 40px 20px;">
                        <h3 class="text-orange">BELIEVE</h3>
                        <p class="aboutus wpad10" align="justify">In a corporation that toasts not only the successes – but  also the opportunities.
                        </p>
                        <p class="aboutus wpad10" align="justify">In a business entity that puts a high premium on freedom and creative participation of its people at all levels…</p>
                        <p class="aboutus wpad10" align="justify">In a management that is committed to corporate expansion, to the personal growth of its people, and to partnerships and ventures that are mutually beneficial…</p>             
                    </div>                    
                    <div class="clearleft"></div>
                </div></div></div></div></div></div></div></div>
            </div>                                                    
        </div>     


Currently you have the following, where the find() matches all the child 'div' elements even those nested deep underneath the 'description' element:

$("#description").find("div:visible").fadeOut();

To just match the immediate children of the 'description' element which are visible, you can use this code instead:

$("#description").children().filter(":visible").fadeOut();

For more information, see the jQuery Traversing API documentation.


If you fade out an element, then all its contents are faded out, so there is no way to exclude certain child elements form the animation. My suggestion would be to use a more specific selector to pick the elements you really do want to fade out.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号