jQuery - 週期略有差異

Question

我已經使用循環插件和其他各種，但我不認爲他們會在這個例子中工作。我有最新的新聞欄目，是1行。例如：

最新消息 - 這是顯示

我通過各種新聞更新需要週期的信息。稍微不同的是我想更新slideRight（隱藏），然後下一個更新slideLeft（顯示）。這樣，寬度不斷變化，最新的新聞標題應該隨着更新的收縮和展開而左右移動（因爲它是內聯的，因此文本的寬度取決於文本）。因此，定位絕對寬度和固定寬度的解決方案無濟於事

我猜它的合理簡單，但林不知道如何。我可以從CSS開始，只定義要顯示的第一個p。然後在jQuery slideright 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