私は JavaScript と jQuery を初めて使用しますが、自分の Web サイトでクールなアニメーションを作成しようとしており、ここに投稿するにはコードが少し長くなる可能性があります。私は自分用にクールな新しい学生ポートフォリオ ページを作成していますが、jQuery アニメーションに問題があると思います。
私のウェブサイトはhttp://timherbert.netです
私の問題は、開発をクリックしてから、ナビゲーションに表示されるデザイン ボタンをクリックしようとすると、アニメーションが機能しないことです。反対側はデザインをクリックして完全に機能し、開発は反対側に戻ります。私はこのバグと、なぜ機能しないのかを理解するのに苦労しており、当惑しています。
私が言ったように、私はこの種のことに慣れていないので、優しくしてください. しかし、私が間違っていること、修正する必要があること、およびその他の批評をいただければ幸いです。
すべてのスクリプトはページの下部にリンクされており、main.js がメインの JavaScript ファイルです。ここにいくつかの機能を投稿すると、誰かが問題を発見するかもしれません。ここに投稿するのに苦労したため、コードのクレイジーなインデントについてお詫び申し上げます。
function rightButton(){
$('.theatre').empty();
$('#content').slideUp();
$('#content-wrapper').toggleClass('overflow');
$('#content-wrapper').removeAttr('style', "");
$("#rightRect").removeClass('cursor');
$("#rightRect").addClass('zz');
$("#rightRect").animate({right:'87%'});
$(content2).appendTo('.theatre');
$('#leftRect').animate({right:'87%'});
$('#social-icons').css({'right': 20 + 'px'});
$('#design-more').animate({right:'-597%'});
$('#design-more').slideDown();
setTimeout(function() { var h = $('.theatre').height();
var hh =
$('#hodgepodge').height();
$('#rightRect').css({'height': h + 'px'});
$('#hodge').css({'height': hh - 20 + 'px'});
$('#rnav').slideDown();
$('#tooltip').tooltip();
$('.tooltip1').tooltip();
$('.tooltip2').tooltip();
$('.tooltip3').tooltip();
}
function leftButton(){
setTimeout(function() {
$('.theatre').empty();
$(content1).appendTo('.theatre');
$('#social-icons').css({'right': 220 + 'px'});
$('#tooltip').tooltip();
$('.tooltip1').tooltip();
$('.tooltip2').tooltip();
$('.tooltip3').tooltip();
}, 20);
$("#leftRect").addClass('yy');
$("#leftRect").animate({left:'86%'});
$('#lnav').fadeIn();
$('#lnav').fadeTo('0.2');
$('#content').slideUp()
$('#rightRect').animate({left:'87%'});
$("#leftRect").addClass('yy');
}
基本的に、関数を呼び出すための onClick のセットアップがありますが、正しく機能せず、何らかの理由で親コンテナーの外部から呼び出すと setTimeout 関数がないと機能しないため、 setTimeout 関数を追加しました。また、問題のボタンを機能させるためのテストとして、rightbutton1 と呼ばれる rightbutton の派生物を使用しており、あらゆる種類のクレイジーなものとタイミングを試しています。