クリック可能なバーがあり、クリックすると Jquery の .animate 関数を使用して 3 つの個別のボックスが移動します。
もう一度クリックしたときにアニメーションを元に戻すには、同じボタンが必要です。私はまだJqueryの初心者なので、これは単純なスコープの問題だと確信していますが、理解できません。
Jクエリ:
// Show More Copy
$('.copy-more').click(function(){
var _toggle = 0;
var _header;
var _sum;
var _full;
var _opacity;
var _text;
if ( _toggle === 0) {
_header = 120;
_sum = 150;
_full = 220;
_opacity = 1;
_text = "Read Less";
_toggle = 1;
}
else {
_header = 310;
_sum = 345;
_full = 420;
_opacity = 0;
_text = "Read More";
_toggle = 0;
}
$('.slide-header').animate({'top': _header}, 150);
$('.copy-sum').animate({'top': _sum}, 250);
$('.copy-full').animate({'top': _full, 'opacity': _opacity}, 500);
$('.copy-more').animate({'opacity': 0}, 500, function () {
$(this).text(_text);
}).animate({'opacity': 1}, 500);
});