CODEWITHSUNDEEP
jquerycycle
Michael
Michael

Reputation: 99

jQuery - Cycle with slight difference

I have used the cycle plugin and various others but I don't think they will work in this example. I have a latest news section which is 1 line. eg:

Latest News - This is the information shown

I want to cycle through the various news updates. The slight difference is I want the updates to slideRight (to hide) then the next update slideLeft(to show). This way the width is constantly changing and the latest news heading should move left and right as the updates collapse and expands (with variable width depending on text because it is inline). Therefore position absolute and fixed width solutions don't help.

Im guessing its reasonably simple but Im not sure how. I could start with the CSS and define only the first p to be shown. Then in jQuery slideright current, then next() slideleft?

http://pastebin.com/2qCQeBMF http://pastebin.com/ERU9K8hC

Upvotes: 0

Views: 97

Answers (1)

Ruben Infante
Ruben Infante

Reputation: 3135

You can do a series of animations and then cycle back at the end

/**
 * Method to animate the news feed
 */
function scrollNews() {
    // If latest news is not being hovered upon
    if (!$('.latestnews').hasClass('hover')) {
        // Get the currently visible update
        var currentUpdate = $('.theupdates').find('p').filter(':visible').first();
        // Get the next update
        var nextUpdate = currentUpdate.next();
        // If there are no next updates
        if (nextUpdate.length === 0) {
            // Get the first update and set it as the next update
            nextUpdate = $('.theupdates').find('p').filter(':first-of-type');
        }
        // Animate the current update out
        currentUpdate.hide('slow', function () {
            // Animate the next update in
            nextUpdate.show('slow', function () {
                // Delay a little bit and then recursively call this method
                window.setTimeout(scrollNews, 2000);
            });
        });
    } else {
        // Delay a little bit and then recursively call this method
        window.setTimeout(scrollNews, 2000);
    }
}

// Handle hover over news
$('.latestnews').on({
    'mouseover': function (e) {
        $(this).addClass('hover');
    },
    'mouseout': function (e) {
        $(this).removeClass('hover');
    }
});

// Start animation
scrollNews();

jsfiddle

Upvotes: 1

Related Questions