ポートフォリオのスライド ショーのリンクで次のコードを使用しています。写真のセクション、タイトルのセクション、付随するストーリーのセクションがあります。それらはすべて、次へと前へのボタンで同時に変更されます。マウスを画像の上に置くと、ストーリーのテキストが表示されるようにしようとしています。オンラインで見つけたさまざまなコードを実装しようとしましたが、これまでのところ結果を得ることができませんでした。試してみると、画像が表示されないか、ストーリーが表示されず、回避策が見つかりませんでした。私が探している効果のタイプは、このリンクの画面の左側の中央にあるものです。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);
ありがとうございました！