如何将 .load() 与 flexslider 一起使用答案

【问题标题】：How do I use .load() with flexslider如何将 .load() 与 flexslider 一起使用
【发布时间】：2014-04-24 21:07:41
【问题描述】：

我正在尝试使用 .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;
});

【问题讨论】：

请更具体地说明什么没有按预期工作。
我已经更新了。更好？
很多，但如果您创建了一个我们可以看到的演示，您可能会获得更多帮助。心理上做起来有点太复杂了。
@isherwood 我正在为此编写一个演示，并在此过程中解决了它！.. 我会发布它。

标签： javascript jquery html ajax slider

【解决方案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 员工制作一个演示。

【讨论】：