jquery - 如何向微型轮播脚本添加淡入淡出动画

Question

我正在尝试向名为 Tiny Carousel 的 slider 插件添加淡入淡出过渡。 .我已经采取了示例演示和 re-styled it here (抱歉使用了 2 个相同的占位符图像)。不幸的是，唯一可用的过渡是幻灯片动画；看起来有点奇怪。我的 jQuery 技能很弱，但是..

“有人知道如何操纵 tinycarousel.js 以允许在幻灯片之间进行渐进和渐出过渡吗？”

JS -

(function ($) {
$.tiny = $.tiny || {};
$.tiny.carousel = {
    options: {
        start: 1,
        display: 1,
        axis: 'x',
        controls: true,
        pager: false,
        interval: false,
        intervaltime: 3000,
        rewind: false,
        animation: false,
        duration: 1000,
        callback: null
    }
};
$.fn.tinycarousel = function (options) {
    var options = $.extend({}, $.tiny.carousel.options, options);
    this.each(function () {
        $(this).data('tcl', new Carousel($(this), options));
    });
    return this;
};
$.fn.tinycarousel_start = function () {
    $(this).data('tcl').start();
};
$.fn.tinycarousel_stop = function () {
    $(this).data('tcl').stop();
};
$.fn.tinycarousel_move = function (iNum) {
    $(this).data('tcl').move(iNum - 1, true);
};

function Carousel(root, options) {
    var oSelf = this;
    var oViewport = $('.viewport:first', root);
    var oContent = $('.overview:first', root);
    var oPages = oContent.children();
    var oBtnNext = $('.next:first', root);
    var oBtnPrev = $('.prev:first', root);
    var oPager = $('.pager:first', root);
    var iPageSize, iSteps, iCurrent, oTimer, bPause, bForward = true,
        bAxis = options.axis == 'x';

    function initialize() {
        iPageSize = bAxis ? $(oPages[0]).outerWidth(true) : $(oPages[0]).outerHeight(true);
        var iLeftover = Math.ceil(((bAxis ? oViewport.outerWidth() : oViewport.outerHeight()) / (iPageSize * options.display)) - 1);
        iSteps = Math.max(1, Math.ceil(oPages.length / options.display) - iLeftover);
        iCurrent = Math.min(iSteps, Math.max(1, options.start)) - 2;
        oContent.css(bAxis ? 'width' : 'height', (iPageSize * oPages.length));
        oSelf.move(1);
        setEvents();
    }

    function setEvents() {
        if (options.controls && oBtnPrev.length > 0 && oBtnNext.length > 0) {
            oBtnPrev.click(function () {
                oSelf.move(-1);
                return false;
            });
            oBtnNext.click(function () {
                oSelf.move(1);
                return false;
            });
        }
        if (options.interval) {
            root.hover(oSelf.stop, oSelf.start);
        }
        if (options.pager && oPager.length > 0) {
            $('a', oPager).click(setPager);
        }
    };

    function setButtons() {
        if (options.controls) {
            oBtnPrev.toggleClass('disable', !(iCurrent > 0));
            oBtnNext.toggleClass('disable', !(iCurrent + 1 < iSteps));
        }
        if (options.pager) {
            var oNumbers = $('.pagenum', oPager);
            oNumbers.removeClass('active');
            $(oNumbers[iCurrent]).addClass('active');
        }
    };

    function setPager(oEvent) {
        if ($(this).hasClass('pagenum')) {
            oSelf.move(parseInt(this.rel), true);
        }
        return false;
    };

    function setTimer() {
        if (options.interval && !bPause) {
            clearTimeout(oTimer);
            oTimer = setTimeout(function () {
                iCurrent = iCurrent + 1 == iSteps ? -1 : iCurrent;
                bForward = iCurrent + 1 == iSteps ? false : iCurrent == 0 ? true : bForward;
                oSelf.move(bForward ? 1 : -1);
            }, options.intervaltime);
        }
    };
    this.stop = function () {
        clearTimeout(oTimer);
        bPause = true;
    };
    this.start = function () {
        bPause = false;
        setTimer();
    };
    this.move = function (iDirection, bPublic) {
        iCurrent = bPublic ? iDirection : iCurrent += iDirection;
        if (iCurrent > -1 && iCurrent < iSteps) {
            var oPosition = {};
            oPosition[bAxis ? 'left' : 'top'] = -(iCurrent * (iPageSize * options.display));
            oContent.animate(oPosition, {
                queue: false,
                duration: options.animation ? options.duration : 0,
                complete: function () {
                    if (typeof options.callback == 'function') options.callback.call(this, oPages[iCurrent], iCurrent);
                }
            });
            setButtons();
            setTimer();
        }
    };
    return initialize();
};
 })(jQuery);

html -

  <div class="viewport">
              <a class="buttons prev" href="#">left</a>
            <ul class="overview">
                <form method="post" action="" class="jcart">
                    <fieldset>

                        <input type="hidden" name="my-item-id" value="ABC-123" />
                        <input type="hidden" name="my-item-name" value="Soccer Ball" />
                        <input type="hidden" name="my-item-price" value="25.00" />
                        <input type="hidden" name="my-item-url" value="" />
                        <li class="captions">
                            <h1 class="price">PRICE: $33.25</h1>
                            <img src="asset/img/picture1.png" />
                             <h1>SNACKS<span>armband</span></h1>
                            <h2>buddy what you nibblin on?</h2>
                            <p>Snackin snack armband for amazing snackin wrist support. When you carryin
                                this whole state on yo back, you’ll need all the support you can get. word.</p>
                            <label>Qty:
                                <input type="text" name="my-item-qty" value="1" size="3" />
                            </label>
                            <input type="submit" name="my-add-button" value="add to cart" class="button"
                            />
                        </li>
                    </fieldset>
                </form>
                                                    <form method="post" action="" class="jcart">
                    <fieldset>

                        <input type="hidden" name="my-item-id" value="ABC-123" />
                        <input type="hidden" name="my-item-name" value="Soccer Ball" />
                        <input type="hidden" name="my-item-price" value="25.00" />
                        <input type="hidden" name="my-item-url" value="" />
                        <li class="captions">
                            <h1 class="price">PRICE: $33.25</h1>
                            <img src="asset/img/picture1.png" />
                             <h1>SNACKS<span>armband</span></h1>
                            <h2>buddy what you nibblin on?</h2>
                            <p>Snackin snack armband for amazing snackin wrist support. When you carryin
                                this whole state on yo back, you’ll need all the support you can get. word.</p>
                            <label>Qty:
                                <input type="text" name="my-item-qty" value="1" size="3" />
                            </label>
                            <input type="submit" name="my-add-button" value="add to cart" class="button"
                            />
                        </li>
                    </fieldset>
                </form>

            </ul>
              <a class="buttons next" href="#">right</a>
        </div>

    </div>

Answer 1

我的建议是使用原生支持 fadeIn/fadeOut 的循环脚本。

http://jquery.malsup.com/cycle/

通常很简单，默认淡入淡出:$('#slideshowcontainer').cycle();