0

这是有问题的脚本部分

<script type="text/javascript">

// To deploy big preview vertically :
var deployer;
deployer = "";

function deploy() {
    $("#" + deployer.substring(0, 4)).slideToggle({
        duration: 500,
        easing: 'easeOutCirc'
    });
}

function reset(bigno) {
    var attendre = false;
    var deployno = deployer.substring(0, 4);
    // close other pictures if opened
    if ((deployer == deployno + "_on") && (deployno != bigno)) {
        $("#" + deployno).slideToggle({
            duration: 300,
            easing: 'easeOutCirc'
        });
        attendre = true;
    }
    // if picture is opened or closed
    if (deployer == bigno + "_on") // if bigno is deployeddeployer = bigno + "_off"; // bigno closed
    else deployer = bigno + "_on"; // bigno opened
    // deploy the current picture
    if (attendre) setTimeout(deploy, 600);
    else deploy();
}
$(document).ready(function() {
    $(".vignette01").click(function() {
        reset("big1");
        return false;
    });
    $(".vignette02").click(function() {
        reset("big2");
        return false;
    });
    $(".vignette03").click(function() {
        reset("big3");
        return false;
    });
    $(".vignette04").click(function() {
        reset("big4");
        return false;
    });
});
$("#big1").toggle(false);
$("#big2").toggle(false);
$("#big3").toggle(false);
$("#big4").toggle(false);
// To scroll :
$(document).ready(function() {
    $('html, body').animate({
        scrollTop: $('div#topdocpart').offset().top
    }, 800, 'easeOutCirc');
});
$(function() {
    $('.vignette a').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1000, 'easeOutCirc');
        event.preventDefault();
    });
});
//load pages on click on small preview open a html content in #bigonglet
$(document).ready(function() {
    $('.vignette2 a').click(function() {
        var url = $('.onglet2 a').attr('href');
        $('#bigonglet').load(url);
        return false;
    });
    $('.vignette1 a').click(function() {
        var url = $('.onglet1 a').attr('href');
        $('#bigonglet').load(url);
        return false;
    });
});
</script>

我有一个我自己无法解决的问题。昨晚我失去了一半的头发试图解决它；）。如果本网站上的任何 NIIIIIIIIIICE（和有才华的）人可以帮助我，那应该很酷。我尝试在 jQuery 中制作一种图片库...

预览（不要点击链接 page1 和 page2）

主要思想是通过滑动切换垂直部署一些外部html页面中加载的内容。你可以看到它不起作用。

1-如何在 html 内容出现之前有延迟？

  • 等待滑动切换被部署或定义延迟

2-如何：

  • 当我重新点击它的按钮时关闭当前已经打开的 html 内容？
  • 关闭当前已打开的 html 内容并打开一个新内容？

如您所见，还有一个滚动功能（单击时滚动到每个大预览）。

- 那么如何重新组合每个按钮上的这 3 个动作呢？

滚动、滑动切换、延迟加载外部 html。

非常感谢您的帮助。我很努力，但我的水平很低。

（如果需要，这是 html）

<!-- Part Top div -->
        <div class="part" id="topdocpart"></div>
<!-- Header -->
<div id="header">
        <!-- the href of .onglet is loaded in #bigonglet -->
        <ul>
           <li class="onglet onglet1"><a href="creations/page01.html">Page1</a></li>
           <li class="onglet onglet2"><a href="creations/page02.html">Page2</a></li>
        </ul>

        <!-- this div load the iframe content-->
        <div id="bigonglet"></div>

        <!-- those div allows to slide vertically -->   
        <div class="part" id="part1" style='position:absolute; top:160px;'></div>
        <div class="part" id="part2" style='position:absolute; top:340px;'></div>   


</div>


<!-- main section -->

<div id="globalcontent">
    <div id="content">

    <!-- Row 01 : small preview -->

        <div class="rowsmallpreview">
            <div class="vignette vignette1">
            <a href="#part1" class="vignette01"><img  src="imbdg/badge01.jpg" width="236" height="130" alt="work01" /></a>            
            </div>

            <div class="vignette vignette2">
            <a href="#part1" class="vignette02"><img  src="imbdg/badge02.jpg" width="236" height="130" alt="work01" /></a>            
            </div>
        </div>

        <!-- Row 01 : big preview to hide (up and down)-->

        <div id="big1" class="workview"></div>
        <div id="big2" class="workview"></div>


    <!-- Row 02 -->

        <div class="rowsmallpreview">
            <div class="vignette">
            <a href="#part2" class="vignette03"><img  src="imbdg/badge03.jpg" width="236" height="130" alt="work01" /></a>            
            </div>

            <div class="vignette">
            <a href="#part2" class="vignette04"><img  src="imbdg/badge04.jpg" width="236" height="130" alt="work01" /></a>            
            </div>
        </div>

        <!-- Row 01 : big preview to hide (up and down)-->

        <div id="big3" class="workview"></div>
        <div id="big4" class="workview"></div>

    </div>
</div>

我做了这个代码：

var deployer;                                                       
        deployer = "";                                                  
        var url ="";


        function deploydown() {
                url = $("#"+deployer.substring(0,6)+' a').attr('href');
                $("#"+deployer.substring(0,6)).slideDown({duration: 700, easing: 'easeOutCirc'}).load(url);
                }



            function reset(bigno) {
                var attendre=false;                                         
                var deployno=deployer.substring(0,6);                           



                if((deployer == deployno+"_on") && (deployno != bigno))                 
                {
                    $("#"+deployno).slideUp({duration: 300, easing: 'easeOutCirc'});    
                    attendre = true;  
                }



                if((deployer == deployno+"_on") && (deployno == bigno))                 
                {
                $("#"+deployno).slideUp({duration: 500, easing: 'easeOutCirc'});   
                    attendre = true;
                }



                if (deployer == bigno+"_on")                    
                    deployer = bigno+"_off";                    
                else
                    deployer = bigno+"_on";                 



                if ((attendre) && (deployno != bigno))                  
                    {
                    setTimeout(deploydown,400);                         
                    }

                else if ((attendre) && (deployno == bigno))         
                    {
                    $("#"+deployer.substring(0,6)); 
                    }


                else
                    {
                    deploydown();
                    }

            }

所以现在它正在使用 load() load(url) 加载一个外部 html

但是如何在关闭时“重置”加载？

例如，当它slideUp时，将当前 html 加载为空的。然后
在它 slideDown 时重新加载 html。

谢谢你的帮助。

4

1 回答 1

0

因为有一个操作顺序......你可以做的是：

 $(SELECTOR).slideToggle().load(url);

这样，它会在加载 url 之前滑动打开。显示操作顺序的另一个示例是：

 $(SELECTOR).slideToggle().slideToggle().slideToggle().slideToggle().slideToggle();

这将连续切换 5 次。

于 2012-07-11T13:40:05.903 回答