關於懸停實現的圖像上的文本

Question

我在鏈接上使用了以下代碼，用於投資組合中的幻燈片放映。它有一張照片，另一張是標題，另一張是相關故事。它們都會隨着next和prev按鈕同時更改。當鼠標懸停在圖像上時，我試圖讓故事文本顯示出來。我一直在努力實現我在網上找到的各種代碼，但目前還沒有達到結果。當我嘗試時，圖像從不出現，或者故事從不出現，我無法找到解決方法。我正在尋找的效果類型將是此鏈接屏幕左側中間的效果類型; http://tympanus.net/jCapSlide/

我想知道如果有人知道如何實現這個動畫到我的代碼。而且我還想保留其他部分，如標題部分功能相同。

這是我目前使用的代碼; http://jsfiddle.net/elliotgray/64nfP/

下面是用於在上面的鏈接上創建懸停文本動畫以防萬一它可能有用的代碼。這是從他們的網站下載的代碼。

任何幫助，將不勝感激。

(function($) { 
    $.fn.capslide = function(options) { 
     var opts = $.extend({}, $.fn.capslide.defaults, options); 
     return this.each(function() { 
      $this = $(this); 
      var o = $.meta ? $.extend({}, opts, $this.data()) : opts; 

      if(!o.showcaption) $this.find('.ic_caption').css('display','none'); 
      else $this.find('.ic_text').css('display','none'); 

      var _img = $this.find('img:first'); 
      var w = _img.css('width'); 
      var h = _img.css('height'); 
      $('.ic_caption',$this).css({'color':o.caption_color,'background-color':o.caption_bgcolor,'bottom':'0px','width':w}); 
      $('.overlay',$this).css('background-color',o.overlay_bgcolor); 
      $this.css({'width':w , 'height':h, 'border':o.border}); 
      $this.hover(
       function() { 
        if((navigator.appVersion).indexOf('MSIE 7.0') > 0) 
        $('.overlay',$(this)).show(); 
        else 
        $('.overlay',$(this)).fadeIn(); 
        if(!o.showcaption) 
         $(this).find('.ic_caption').slideDown(500); 
        else 
         $('.ic_text',$(this)).slideDown(500); 
       }, 
       function() { 
        if((navigator.appVersion).indexOf('MSIE 7.0') > 0) 
        $('.overlay',$(this)).hide(); 
        else 
        $('.overlay',$(this)).fadeOut(); 
        if(!o.showcaption) 
         $(this).find('.ic_caption').slideUp(200); 
        else 
         $('.ic_text',$(this)).slideUp(200); 
       } 
      ); 
     }); 
    }; 
    $.fn.capslide.defaults = { 
     caption_color : 'white', 
     caption_bgcolor : 'black', 
     overlay_bgcolor : 'blue', 
     border   : '1px solid #fff', 
     showcaption  : true 
    }; 
})(jQuery); 

謝謝！

Answer 1

我改變你的代碼。

http://jsfiddle.net/64nfP/3/