jquery - 如何在另一个动画背景中为字幕添加过渡

Question

 <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 滑入每个 slider ，上面已经有文字):

我如何修改代码，让背景先滑入，然后文本在其上动画

Answer 1

你必须把它从现有的动画 div 中取出，然后像这样把它放在它自己的动画 div 中:

<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">
                <h1 class="sliderCapTextHdr">Healthy Cooking</h1>
                <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 u="caption" class="sliderCapMain" t="ZMF|10">
            <div class="sliderCapText">
                <div class="sliderCapTextHdr">Healthy Cooking</div>
            </div>
        </div>
        <div u="caption" class="sliderCapMain" t="RTTL|BR">
            <div class="sliderCapTextF">
                <div class="sliderCapTextFtr">Discover simple solutions to cook delicious and healthy meals for you and your family. Cooking tips, how-to guides and more!</div>
            </div>
        </div>
    </div>
</div>