Question

我已经开始在任何jsFiddle项目中构建，配置和实现anythingSlider，我注意到一旦我实现了缩略图/滑块系统，我的字幕就不再是转换/加载的动画了。 jQuery可能在javaScript框中相互冲突。

你可以在这里查看小提琴：http://jsfiddle.net/jodriscoll/fKCFE/。

理论上，标题应从图像下方滑入，并在幻灯片/从一张幻灯片过渡到另一张幻灯片时显示自己。

以下是一个以我喜欢的方式工作的示例：http://jsfiddle.net/jodriscoll/fKCFE/51/

// caption toggle animation time
var toggleTime = 500,
// always show caption when slide comes into view
showCaptionInitially = true,

updateCaption = function(slider, init) {
    if (init && showCaptionInitially) {
        setTimeout(function() {
            slider.$targetPage.find('.caption').animate({
                bottom: 0
            }, toggleTime);
        }, slider.options.delayBeforeAnimate + toggleTime);
    } else if (!init) {
        var cap = slider.$lastPage.find('.caption');
        cap.css('bottom', -cap.innerHeight());
    }
};

$('#slider').anythingSlider({
//  buildNavigation : false,
// *********** Callbacks ***********
// Callback when the plugin finished initializing
onInitialized: function(e, slider) {
    slider.$items.each(function() {
        var cap = $(this).find('.caption');
        cap.css('bottom', -cap.innerHeight()).click(function() {
            cap.animate({
                bottom: (cap.css('bottom') === "0px" ? -cap.innerHeight() : 0)
            }, toggleTime);
        });
    });
    updateCaption(slider, true);
},

// Callback before slide animates
onSlideBegin: function(e, slider) {
    updateCaption(slider, true);
},

// Callback after slide animates
onSlideComplete: function(slider) {
    updateCaption(slider, false);
}
});

Answer 1

问题是该滑块正在初始化两次。第二个实例中的任何代码都将被忽略。这是一个updated demo，其中包含两个代码。

// ******************
// Thumnail Slider
// ******************
var fadeTime = 0,
    fadeDelay = 0,
    timer,
    hideControls = function (slider) {
        clearTimeout(timer);
        setTimeout(function () {
            slider.$controls.fadeOut(fadeTime);
            $('.tooltip').fadeOut(fadeTime);
        }, fadeDelay);
    },
    // ******************
    // Caption animation
    // ******************
    toggleTime = 500,
    showCaptionInitially = true,
    updateCaption = function (slider, init) {
        if (init && showCaptionInitially) {
            setTimeout(function () {
                slider.$targetPage.find('.caption').animate({
                    bottom: 0
                }, toggleTime);
            }, slider.options.delayBeforeAnimate + toggleTime);
        } else if (!init) {
            var cap = slider.$lastPage.find('.caption');
            cap.css('bottom', -cap.innerHeight());
        }
    };

$('#slider').anythingSlider({
    navigationSize: 3,
    navigationFormatter: function (i, panel) {
        var url = 'http://www.massgeneral.org/international/dev/assets/slideshow/slideshow-',
            thumbs = [
                ['01', 'This is the tooltip for the first thumbnail'],
                ['02', 'This is the tooltip for the second thumbnail'],
                ['03', 'This is the tooltip for the third thumbnail'],
                ['04', 'This is the tooltip for the fourth thumbnail'],
                ['05', 'This is the tooltip for the fifth thumbnail'], ];
        return '<img title="' + thumbs[i - 1][1] + '" src="' + url + thumbs[i - 1][0] + '.jpg">';
    },
    onInitialized: function (e, slider) {
        slider.$items.each(function () {
            var cap = $(this).find('.caption');
            cap.css('bottom', -cap.innerHeight()).click(function () {
                cap.animate({
                    bottom: (cap.css('bottom') === "0px" ? -cap.innerHeight() : 0)
                }, toggleTime);
            });
        });
        updateCaption(slider, true);
        slider.$controls.find('img').tooltip();
    },
    onSlideBegin: function (e, slider) {
        updateCaption(slider, true);
    },
    onSlideComplete: function (slider) {
        updateCaption(slider, false);
    }
});

anythingSlider - 标题不再动画

1 个答案: