如何在flexslider中使用.load（）

I'm trying to load content into a slider using .load() but I don't seem to be able to get it to work smoothly - with the code below, once the link is clicked the content fades out the footer shoots up to fill the space of the faded out content then a funny double flash of content, and finally the content loads.

我正在尝试使用.load()将内容加载到滑块中,但我似乎无法使其顺利运行 - 使用下面的代码,一旦链接被点击,内容就会逐渐淡出页脚填充淡出内容的空间然后有趣的双重内容,最后内容加载。

The functionality I would like is: on click, get URL (and content via the selector) animate #slider to top of page, fade out the #slider, load content into it then fade #slider back in avoiding the footer jumping up due the slider being faded out.

我想要的功能是:点击,获取URL(和通过选择器的内容)动画#slider到页面顶部,淡出#slider,加载内容然后淡化#slider,以避免页脚跳起来滑块淡出。

My markup:

<div id="slider">

    <div class="flexslider">

      IMAGES / CONTENT

    </div>

</div>

and the jQuery so far

和jQuery到目前为止

//Slider
$('a.test').click(function() {
    var address = $(this).attr('href');

    $('html,body').animate({
            scrollTop: $('#slider').offset().top
        }, 500, function() {

            $('#slider').animate({opacity: 0}, function(){

                $('.flexslider').load(address + ' .flexslider', function(){

                $('.flexslider').flexslider({
                animation: 'slide',
                smoothHeight: true,
            });

            }, function(){
                $('#slider').animate({opacity: 1});
            });

        });

    });

    return false;
});

1 个解决方案

#1

Managed to get this working pretty well. Just need to add an extra div plus the following jquery.

管理得很好。只需要添加一个额外的div加上以下的jquery。

$('a.test').click(function() {
    var address = $(this).attr('href');
    var slider_outer = $('#slider');
    var loadarea = $('#slider-inner');
    var current_height = slider_outer.innerHeight();
    slider_outer.css({
        "height": (current_height)
    });
    slider_outer.addClass('spinner');
    $('html,body').animate({
        scrollTop: slider_outer.offset().top
    }, 200, function() {
        loadarea.animate({
            opacity: 0,
            display: 'block',
            visibility: 'hidden'
        }, 500, function() {
            loadarea.load(address + ' .flexslider', function() {
                $(this).animate({
                    opacity: 1.0
                }, 500, function()
                          slider_outer.removeClass('spinner');
                          $('.flexslider').flexslider({
                        animation: 'slide',
                        smoothHeight: true,
                        easing: 'swing',
                        animationSpeed: 500,
                        slideshowSpeed: 10000,
                        touch: true,
                        prevText: '',
                        nextText: '',
                        start: function(slider) {
                            $('.flex-control-nav').fadeIn(500);
                            $('.total-slides').text(slider.count);
                            $('.current-slide').text(slider.currentSlide + 1);
                            slider_outer.removeAttr('style');
                        },
                        after: function(slider) {
                            $('.current-slide').text(slider.currentSlide + 1);
                        }
                    });
                });
            });
        });
    });
    return false;
});

and the html

和HTML

<div id="slider">

   <div id="slider-inner">

        <div class="flexslider">

          IMAGES / CONTENT

        </div>

    </div>

</div>

I'd like it to be smoother so if anyone can see a better / smoother way of doing this that would be great. I'll try and get a demo working for Googlers.

我希望它更顺畅,所以如果有人能够看到一个更好/更顺畅的做法,这将是伟大的。我会尝试为Google员工制作一个演示程序。

#1