【发布时间】：2014-11-06 14:45:25
【问题描述】：
<div u="slides" class="sliderHolder">
<div>
<img u="image" src="theImages/slider/homepage/1.png" alt="1" title="1" />
<div u="caption" t="CLIP|L" class="sliderCapMain">
<div class="sliderCapBG"></div>
<div class="sliderCapText">
<div u="caption" t="ZMF|10"><h1 class="sliderCapTextHdr">Healthy Cooking</h1></div>
<br />
<span class="sliderCapTextFtr">Discover simple solutions to cook delicious and healthy meals for you and your family. Cooking tips, how-to guides and more!</span>
</div>
</div>
</div>
</div>
sliderCapBG 从左侧滑入并在其中显示这些文本。
这里是 jssorSlider.js 文件：
jQuery(document).ready(function ($) {
//Reference http://www.jssor.com/development/tip-make-responsive-slider.html
var _CaptionTransitions = [];
_CaptionTransitions["CLIP|L"] = { $Duration: 900, $Clip: 1, $Easing: $JssorEasing$.$EaseInOutCubic };
_CaptionTransitions["ZMF|10"] = { $Duration: 600, $Zoom: 11, $Easing: { $Zoom: $JssorEasing$.$EaseInExpo, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 };
var options = {
$AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
$DragOrientation: 3, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0),
$CaptionSliderOptions: { //[Optional] Options which specifies how to animate caption
$Class: $JssorCaptionSlider$, //[Required] Class to create instance to animate caption
$CaptionTransitions: _CaptionTransitions, //[Required] An array of caption transitions to play caption, see caption transition section at jssor slideshow transition builder
$PlayInMode: 1, //[Optional] 0 None (no play), 1 Chain (goes after main slide), 3 Chain Flatten (goes after main slide and flatten all caption animations), default value is 1
$PlayOutMode: 3 //[Optional] 0 None (no play), 1 Chain (goes before main slide), 3 Chain Flatten (goes before main slide and flatten all caption animations), default value is 1
}
};
var jssor_slider1 = new $JssorSlider$("slideIT", options);
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizes
function ScaleSlider() {
//reserve blank width for margin+padding: margin+padding-left (10) + margin+padding-right (10)
var paddingWidth = 0;
//minimum width should reserve for text
var minReserveWidth = 150;
var parentElement = jssor_slider1.$Elmt.parentNode;
//evaluate parent container width
var parentWidth = parentElement.clientWidth;
if (parentWidth) {
//exclude blank width
var availableWidth = parentWidth - paddingWidth;
//calculate slider width as 70% of available width
var sliderWidth = availableWidth * 1;
//slider width is maximum 600
sliderWidth = Math.min(sliderWidth, 1100);
//slider width is minimum 200
sliderWidth = Math.max(sliderWidth, 200);
//evaluate free width for text, if the width is less than minReserveWidth then fill parent container
if (availableWidth - sliderWidth < minReserveWidth) {
//set slider width to available width
sliderWidth = availableWidth;
//slider width is minimum 200
sliderWidth = Math.max(sliderWidth, 200);
}
jssor_slider1.$ScaleWidth(sliderWidth);
}
else
window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();
if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) {
$(window).bind('resize', ScaleSlider);
}
});
屏幕截图（透明的白色背景sliderCapBG 滑入每个滑块，上面已经有文字）：
如何修改代码，使背景先滑入，然后文本在其上进行动画处理
【问题讨论】：
-
是的，允许嵌套标题。你做得对。那有什么问题呢？
-
@jssor 我能够找出问题并纠正它，但如果文本不包含在同一动画中，Chrome 中的文本会很模糊。谢谢。
-
请尝试将 $HWA 设置为 false。
-
我试过了，但不幸的是还是没有：/