Question

我尝试使用.load（）将内容加载到滑块中但我似乎无法使其顺利运行 - 使用下面的代码，一旦链接被点击了内容淡出页脚向上填充淡出内容的空间然后是一个有趣的双重内容，最后内容加载。

我想要的功能是：点击，获取URL（以及通过选择器的内容）动画#slider到页面顶部，淡出#slider，将内容加载到其中然后淡化#slider以避免页脚跳跃由于滑块消失了。

我的标记：

<div id="slider">

    <div class="flexslider">

      IMAGES / CONTENT

    </div>

</div>

到目前为止

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

Answer 1

管理以使其工作得很好。只需要添加一个额外的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;
});

和html

<div id="slider">

   <div id="slider-inner">

        <div class="flexslider">

          IMAGES / CONTENT

        </div>

    </div>

</div>

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

如何在flexslider中使用.load（）

1 个答案: