Question

我对超大插件有一些问题。我想动画字幕（标题）：

$.supersized({
slide_interval  :   5700,
slides          :   [
 {image : 'image01.jpg', thumb : '', title : 'title1'},
 {image : 'image02.jpg', thumb : '', title : 'title2'}
 ]
});

有人可以告诉我如何获取标题值并通过以下方式设置动画：

.animate({bottom:"100px;"})

然后隐藏它并在幻灯片更改时显示下一个标题。

Answer 1

打开 supersized.shutter.js 找到这一行：

if ($(vars.slide_caption).length)
{
   (api.getField('title'))?$(vars.slide_caption).html(api.getField('title')):$(vars.slide_caption).html('');
}

并改为：

if ($(vars.slide_caption).length) {
   (api.getField('title'))?$(vars.slide_caption).animate({'opacity':.1}).html(api.getField('title')).animate({'opacity':1}):$(vars.slide_caption).html('');
}

您也可以使用以下变量：

api.options.slide_interval;
api.options.transition_speed;

例如：

if ($(vars.slide_caption).length) {
    (api.getField('title')) ? $(vars.slide_caption).animate({'opacity': .1}, {complete: function (){$(this).html(api.getField('title'))}}).stop(true,true).animate({'opacity': 1}, api.options.transition_speed): $(vars.slide_caption).html('');
}

jQuery Supersized - 字幕动画

1 个答案: