CSSトランジションを使用して画像ギャラリーを作成しました。CSSトランジションをmodernizrプラグインでpicekdupとして使用できない場合、デフォルトでフェードインおよびフェードアウト効果が適用されます。この効果はまったく機能していません。誰かがコードの問題を見ることができますか？CSS3バージョンは完全に機能します。
編集
Webキットの動作と同じようにaddClassとremoveClassに作り直しました。JQuery関数は、コンソールエラーなしで機能するようになりました。ただし、特に流動的ではありません。CSS-3トランジションでは、ユーザーが複数のサムネイルをクリックすると、エフェクトの途中であっても、画像は穏やかにトランジションされます。JQueryの継ぎ目が詰まり、ジャンプを開始します。
これに関するアイデア。
var timerp = null;
var nextslide;
if(!Modernizr.csstransitions) {
$('.thumbs').click(function() {
if (timerp) {
window.clearInterval(timerp);
}
$('.cornerimgfocus').removeClass('cornerimgfocus',{queue:true,duration:2000});
$('#P' + $(this).attr('id')).addClass('cornerimgfocus',{queue:true,duration:2000});
gallery();
});
function gallery() {
timerp = window.setInterval(function() {
var islide = $('.cornerimgfocus');
islide.removeClass('cornerimgfocus',{queue:true,duration:2000});
if (islide[0] == $('.cornerimg:last')[0]) {
nextslide = $('.cornerimg').first();
} else {
nextslide = islide.next();
};
nextslide.addClass('cornerimgfocus',{queue:true,duration:2000});
}, 6000);
}
}
else {
$('.thumbs').click(function() {
if (timerp) {
window.clearInterval(timerp);
}
$('.cornerimgfocus').removeClass('cornerimgfocus');
$('#P' + $(this).attr('id')).addClass('cornerimgfocus');
gallery();
});
function gallery() {
timerp = window.setInterval(function() {
var islide = $('.cornerimgfocus');
islide.removeClass('cornerimgfocus');
if (islide[0] == $('.cornerimg:last')[0]) {
nextslide = $('.cornerimg').first();
} else {
nextslide = islide.next();
};
nextslide.addClass('cornerimgfocus');
}, 6000);
}
}