【问题标题】:Show this div and hide that div显示这个 div 并隐藏那个 div
【发布时间】:2012-04-28 12:13:39
【问题描述】:

你好我想知道如何修改我的以下js函数以隐藏一个div的内容并在fancybox的打开弹出窗口中显示以下div的内容以显示以下div

<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>

下面的函数成功隐藏了视频,但它没有显示上面提到的div...

 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');

       });
 }

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 });
                }
        });

【问题讨论】:

  • 有没有像 $('#divAB7').clicked; 这样的javascript点击div函数// 完成以下相同的功能:阅读更多
  • 您的li 标签似乎没有li 兄弟元素。如果是这样,这将是无效的 HTML; liulol唯一 有效子元素,不能存在其他标签除非它们被包裹在@ 中987654329@.

标签: javascript jquery-ui jquery fancybox


【解决方案1】:

当您在 fancybox 中打开内联内容(#demoView#divVideo,如您的示例)时,内容实际上从 html 流中的位置移动到了 fancybox 和一个临时的 @而是留下 987654323@。

因此,当您在 fancybox 中打开 #divVideo 时,只有该内容实际上是在 fancybox 中,所以这就是您可以将其淡出的原因。你不能淡入#demoView,因为它在fancybox中不存在。

也许你只需要在你的(暂停)事件回调中触发第二个幻想框,比如

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

...这会将第二个内容 (#demoView) 带入 fancybox,而当前 (#divVideo) 将淡出。

【讨论】:

  • 问题解决了......当我检查在线服务器上的文件时,您提出的解决方案非常感谢!!!!!!!
  • 最后一个问题如何在触发此事件之前进行计时器检查 --- $('#example4').trigger("click"); --- 10 秒后的计时器检查...
  • 你可以使用javascript setTimeout;类似于:setTimeout(function(){$("#example4").trigger("click");},10000); 其中 1000 = 1 秒
【解决方案2】:

现在是不是因为 demoView 的封闭 div 被隐藏了?所以像......

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

可以吗?

【讨论】:

    【解决方案3】:

    为什么父母甚至在那里?也许你应该取消它并将 style 属性放在你的 demoView div 上。

    【讨论】:

    • 有没有像 $('#divAB7').clicked; 这样的javascript点击div函数// 完成点击阅读更多时相同的以下功能:阅读更多
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-11-26
    • 2015-10-15
    • 2016-11-27
    • 2012-09-30
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多