Legend with predetermined time to disappear

[acpj21]

Hi,

I'm using the AnythingSlider and I have had a great return for their presentation. The use demo3, and the FX addon, using base FX. I want to know how can I put a pre set time for the legend to be hidden, ie the slide loads and (after 5 seconds) the legend disappears. Consider that the slider is in the autoPlay : false.

Tks,

[Mottie]

Hi @acpj21!

Here is the original caption demo as found on the home wiki page, listed as "Popup Captions".

With the following modifications you can hide the caption after a "delay" (demo):

    // caption toggle animation time
var toggleTime = 500,
    // always show caption when slide comes into view
    showCaptionInitially = true,
    // hide caption after this amount of time (ms)
    delay = 5000,
    timer,
    updateCaption = function(slider, init) {
        var cap = slider.$lastPage.find('.caption');
        if (init && showCaptionInitially) {
            setTimeout(function() {
                slider.$targetPage.find('.caption').animate({
                    bottom: 0
                }, toggleTime);
            }, slider.options.delayBeforeAnimate + toggleTime);
        } else if (init === false) {
            cap.css('bottom', -cap.innerHeight());
        } else {
            slider.$targetPage.find('.caption').animate({
                bottom: -cap.innerHeight()
            }, toggleTime);
        }
    };

$('#slider').anythingSlider({
    //    buildNavigation    : false,
    // *********** Callbacks ***********
    // Callback when the plugin finished initializing
    onInitialized: function(e, slider) {
        slider.$items.each(function() {
            var cap = $(this).find('.caption');
            cap.css('bottom', -cap.innerHeight()).click(function() {
                cap.animate({
                    bottom: (cap.css('bottom') === "0px" ? -cap.innerHeight() : 0)
                }, toggleTime);
            });
        });
        updateCaption(slider, true);
        timer = setTimeout(function(){
            updateCaption(slider);
        }, delay);
    },

    // Callback before slide animates
    onSlideBegin: function(e, slider) {
        clearTimeout(timer);
        updateCaption(slider, true);
    },

    // Callback after slide animates
    onSlideComplete: function(slider) {
        updateCaption(slider, false);
        // hide caption after "delay" ms
        timer = setTimeout(function(){
            updateCaption(slider);
        }, delay);
    }

});

* Please make sure the above code is wrapped within a document ready function

$(function(){
    /* code goes here */
});

---

Oops, sorry, I should have used the FX extension... I'll have to work on that demo later.

[acpj21]

Hi Mottie,

Thank you very much for answering my question and the response speed!

I changed the slider code to my site, using the proposed code and it worked fine.

Tks,