显示此div并隐藏该div

Question

Hello i want to know how can i modify my following js function to hide the content of one div and shows the content of the following div in the opened popup of fancybox the following div to show

<LI><A class="demo" id="example4" href="#demoView">Demo</A></LI> //linkfunctionality i want to show
<a id="various2" href="#divVideo" class="fl ml20"><img src="images/sites/img2.png" alt="" class="fl mr10" /></a> //Link functionality i want to hidde

<div style="display:none;">
    <div id="demoView">
        <div class="fl w900 pa20 bg2 tac">
            <h3 class="ff2 fwb fs30 mb10 cf3">Please contact us for a quick demo.</h3>
            <h4 class="ff2 fwb fs26 mb40 cf3">Email: <span  class="cf2 pr25"><a style="text-decoration:none; color:#2a98e2;" href="mailto:info@caremerge.com">info@caremerge.com</a></span> Call: <span class="cf2">(888) 996 6993</span></h4>
            <img src="images/sites/demo1.png" alt=""  class="dpib mb20"/>
        </div>
    </div>
</div>

The function below is successfully hiding the video but its not displaying the div mentioned above in it...

 function onPause() {

       froogaloop.addEvent('pause', function(data) {
                //$('a[href="#various2"]').fadeOut();
                $('#divVideo').fadeOut(500);
                // $('#various2').fadeOut(500);
                //$(' #demoView').fadeIn(500);
                $('#demoView').fadeIn();

                alert('ST-UCK');

       });
 }

Some part of FANCY BOX JQUERY OF MY CODE

jQuery(document).ready(function() {     

        $("a#example4").fancybox({
                'opacity'       : true,
                'overlayShow'   : false,
                'transitionIn'  : 'elastic',
                'transitionOut' : 'none'
            });

        $("#various2").fancybox({
            'opacity'       : true,
                'overlayShow'   : false,
                'transitionIn'  : 'elastic',
                'transitionOut' : 'none',
                'onClosed'  :   function() {
                            document.getElementById('iframe-video');

                },
                'onStart'       :   function() {
                            //alert("hi");
                            //$('#banner-rotator').royalSlider({slideshowEnabled:false,slideshowDelay:20000 });
                }
        });

Answer 1

When you open inline content in fancybox (either #demoView or #divVideo as in your example) the content is literally moved from its place in the html flow into the fancybox and a temporary div is left instead.

So when you opened #divVideo in fancybox, only that content is actually inside fancybox so this is why you can fade it out. You cannot fade #demoView in because it doesn't exist inside fancybox.

Maybe you just need to trigger the second fancybox inside your (pause) event callback like

function onPause() {
       froogaloop.addEvent('pause', function(data) {
                $('#example4').trigger("click"); //linkfunctionality you want to show
       });
 }

... that will bring the second content ( #demoView ) inside fancybox and the current ( #divVideo ) will just fade out.

Answer 2

Is it now because the enclosing div for demoView is hidden? So something like...

$("#demoview").parent().css({'display','inherit'});

May work?

Answer 3

Why is the parent even there? Perhaps you should do away with it and put the style attribute on your demoView div.