スライドショー用 jQuery Cycle Plugin をマウスオーバー時だけ有効にしたい

サンプルとして、以下のような .slideshow クラスにスライドショーを適用します。
今回は、jquery.cycle を利用するにあたって、CSS 設定を用いたサンプルと、jQuery だけを用いたサンプルの２つを用意しました。

CSS を使う場合のサンプル

複数の img 要素が並んで表示されないように、また JavaScript 無効時でも表示が崩れないように、最初の img 要素を first クラスと名付け、以下の CSS を適用します。

<!-- HTML -->
<div class="slideshow">
  <img src="image1.jpg" width="200" height="200" class="first"/>
  <img src="image2.jpg" width="200" height="200" />
  <img src="image3.jpg" width="200" height="200" />
</div>

/* CSS */
.slideshow img { display: none }
.slideshow img.first { display: block }

// JavaScript
$(document).ready(function() {
  $('.slideshow').hover(function() {  // mouse over
    $(this).cycle({timeout: 1000});
  }, function() {  // mouse out
    $(this).cycle('pause');
  });
});

CSS を使わない場合のサンプル

Ajax で画像の DOM 要素を動的に作成・追加している場合、CSS 設定や余計なクラス名の追加が煩わしい場合があります。　どうせ JavaScript 無効時は DOM 要素が追加されないのだから、JavaScript だけで全部設定したいです。
Ajax で以下の div.slideshow 要素が動的に作成・追加されるとします。

<!-- HTML (Ajax で動的に追加) -->
<div class="slideshow">
  <img src="image1.jpg" width="200" height="200" />
  <img src="image2.jpg" width="200" height="200" />
  <img src="image3.jpg" width="200" height="200" />
</div>

// JavaScript
$(document).ready(function() {
  // Ajax
  $.get(uri, function(data) {
    // 
    // 上記 div.slideshow 要素の追加処理
    //
    
    // jquery.cycle : Ajax コールバック関数の最後で実行
    var $slideshow = $('.slideshow');
    $slideshow
      .cycle({timeout: 1000})  // 初期化（複数の画像がここで一つにまとめられる）
      .cycle('pause');  // スライドショーを一時停止しておく
    
    $slideshow.hover(function() {  // mouse over
      $(this).cycle('resume');  // マウスオーバー時にスライドショーを再開
    }, function() {  // mouse out
      $(this).cycle('pause');  // マウスアウト時にスライドショーを一時停止
    });
});

このように、'resume' と 'pause' をうまく使い分けることで対処できます。

複数の hover() メソッド下で使用する場合

マウスオーバー時に画像がチラつく場合、複数の hover() メソッドが同時に実行されている可能性が高いです。
このような問題は hover() の中で、cycle() や表示系に影響する addClass(), removeClass() を使用している場合に起こります。
解決策は，これら cycle() 等のメソッドを使用する前に stop() を使用しておくことです。

// JavaScript
$('.slideshow').hover(
function() {  // mouse over
  $(this).stop().cycle({
    timeout: 1000
  });
}, function() {  // mouse out
  $(this).stop().cycle('pause');
});