Question

这是包含问题的脚本部分

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

我有一个问题，我自己无法解决。我昨晚失去了一半的头发试图解决它;）。如果这个网站上有任何NIIIIIIIIICE（和才华横溢的）人可以帮助我，那应该是非常酷的。我尝试在jQuery中创建一种图像库...

A preview（不要点击第1页和第2页的链接）

主要思想是使用slidetoggle垂直部署在某些外部html网页中加载一些内容。你可以看到它不起作用。

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

等待部署幻灯片或以定义延迟

2- how：

关闭当我点击其按钮时已打开的当前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

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

例如 to swich 当前的html在滑动时由空的加载。然后
在slideDown 时重新加载html。

感谢您的帮助。

Answer 1

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

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

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

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

将连续5次切换。

Slidetoggle +外部html：Jquery load（）+滚动问题

1 个答案: