更改此 jQuery 图像幻灯片上的“标题”动画方式答案

【问题标题】：Change the way the "caption" animates on this jQuery Image Slideshow更改此 jQuery 图像幻灯片上的“标题”动画方式
【发布时间】：2011-12-20 06:12:21
【问题描述】：

我发现了这个很棒的 jQuery 幻灯片： http://slidesjs.com/examples/images-with-captions/

但是，我希望“标题”区域不会消失并为每张图片显示。我希望它只是根据新图像更改文本。

这可能吗？如果可以，我该如何实现？

作为参考，这里是文件：slides.min.jquery.js（http://slidesjs.com/examples/images-with-captions/js/slides.min.jquery.js）

这里是正在使用的 JavaScript 代码的 sn-p：

animationStart: function(current){
                    $('.caption').animate({
                        bottom:-35
                    },100);
                    if (window.console && console.log) {
                        // example return of current slide number
                        console.log('animationStart on slide: ', current);
                    };
                },
                animationComplete: function(current){
                    $('.caption').animate({
                        bottom:0
                    },200);
                    if (window.console && console.log) {
                        // example return of current slide number
                        console.log('animationComplete on slide: ', current);
                    };
                },
                slidesLoaded: function() {
                    $('.caption').animate({
                        bottom:0
                    },200);
                }

非常感谢您的任何指点。

【问题讨论】：

试过删除第一个 caption-animate-part 吗？

标签： javascript jquery animation slideshow caption

【解决方案1】：

animationStart: function(current){
                    if (window.console && console.log) {
                        // example return of current slide number
                        console.log('animationStart on slide: ', current);
                    };
                },
                animationComplete: function(current){
                    $('.caption').animate({
                        bottom:0
                    },200);
                    if (window.console && console.log) {
                        // example return of current slide number
                        console.log('animationComplete on slide: ', current);
                    };
                },
                slidesLoaded: function() {
                    $('.caption').animate({
                        bottom:0
                    },200);
                }

在示例页面上工作。

|编辑| 100% 工作示例：http://jsfiddle.net/byvd9/1/

【讨论】：

【解决方案2】：

我进行了调整，使标题在图像进入 carreganda 后使用以 0 开头的不透明度淡入效果 - 请记住，如果您选择淡入淡出过渡效果，他会在不透明度淡入淡出中生成标题，但仅确保效果被感知，或者如果您希望打开图像更加atrazado。

<script>
        $(function(){
            $('#slides').slides({
                preload: true,
                //preloadImage: 'img/banner/carregando.gif',
                play: 5000,
                pause: 2500,
                effect: 'fade',
                fadeEasing: "easeOutQuad",
                fadeSpeed: 850,
                hoverPause: true,
                animationStart: function(current){
                    $('.caption').animate({
                        bottom:0,
                        opacity:0
                    },100);
                    if (window.console && console.log) {
                        // example return of current slide number
                        console.log('animationStart on slide: ', current);
                    };
                },
                animationComplete: function(current){
                    $('.caption').animate({
                        bottom:0,
                        opacity:1
                    },600);
                    if (window.console && console.log) {
                        // example return of current slide number
                        console.log('animationComplete on slide: ', current);
                    };
                },
                slidesLoaded: function() {
                    $('.caption').animate({
                        bottom:0,
                        opacity:1
                    },600);
                }
            });
        });
    </script>

【讨论】：