jQuery - цикл с небольшой разницей

Question

Я использовал плагин цикла и другие другие, но я не думаю, что они будут работать в этом примере. У меня есть последний раздел новостей, который является 1 строкой. например:

Последние новости - это информация, указанная

Я хочу, чтобы цикл через различные обновления новостей. Небольшое различие заключается в том, что я хочу обновления slideRight (чтобы скрыть), а затем следующее обновление slideLeft (для отображения). Таким образом, ширина постоянно меняется, и последний заголовок новостей должен перемещаться влево и вправо по мере того, как обновления сворачиваются и расширяются (с переменной шириной в зависимости от текста, поскольку он является встроенным). Поэтому решения абсолютной и фиксированной ширины не помогают.

Я думаю, что это достаточно просто, но я не уверен, как это сделать. Я мог бы начать с CSS и определить только первый p, который будет показан. Затем в jQuery ползунок current, затем next() slideleft?

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

Answer 1

Вы можете сделать серию анимации, а затем цикл назад в конце

/** 
* 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