0

我有一个可点击的栏，一旦点击就会使用 Jquery 的 .animate 函数移动三个单独的框。

再次单击时，我需要相同的按钮来反转动画。我仍然是 Jquery 的菜鸟，所以我确定这是一个简单的范围问题，但我无法弄清楚。

查询：

// 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);
});
4

2 回答 2

1

_toggle在.click范围内定义。它需要进一步扩大范围才能发挥作用：

// Move _toggle to here
var _toggle = 0;
$('.copy-more').click(function(){

    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);
});

但是，您应该改为查看.toggleClass和CSS3 动画- 更干净

于 2013-09-09T12:35:16.310 回答
0

Jquery toggle() 将满足您的要求。您无需在使用 .toggle() 时检查任何标志。

$('#target').toggle(function() {
  alert('First handler for .toggle() called.');
}, function() {
  alert('Second handler for .toggle() called.');
});

看看这个jsfiddle 演示。另请参阅此文档以获取更多参考。

于 2013-09-09T12:44:39.550 回答