Question

我创建了一些动画，每个动画应该是主网站滑块上的单独幻灯片这就是为什么，我从我的老板那里得到一个对象结构（下面的代码），他说我应该用它来制作那些动画。

var RDAnimation = function(o){
var f = $.extend({
    start: function() {
        return true;
    },
    pause: function() {
        return true;
    },
    reset: function() {
        return true;
    },
    stop: function() {
        if (this.pause()) {
            return this.reset();
        }
    },
    vars: {}
},o);
this.start = f.start;
this.pause = f.pause;
this.reset = f.reset;
this.stop = f.stop;
this.vars=f.vars;
};

但是因为我在处理对象方面没有多少经验，所以我只需将所有动画功能粘贴到“开始”中，只是为了看看会发生什么（下面的代码）。

var anim3=new RDAnimation({

    start: function() {
        var $this = this;

function bars() {
var barHeight = 0;

$('.chart-bar').each(function () {

    barHeight = Math.floor(Math.random() * 100);

    $(this).delay(1000).animate({
        'height': barHeight + '%',
        'min-height': '20px'},
        700, function(){

            bars();   
     });

});

}

var count = 0;

function badgeClone() {

var badge1 = $('.badge');
var badge2 = $('.badge').clone();

var badgeWidth = badge1.width();
var badgeHeight = badge1.height();

    //badge1.text(count);

    badge1.after(badge2);
    badge2.css({
        'line-height': '180px',
        'text-align': 'center',
        'font-size': '70px',
        'font-weight': 'bold',
        'color': '#fff',
        'opacity':'0'
    });

    badge2.animate({
        'width': badgeWidth * 2 + 'px',
        'height': badgeHeight *2 + 'px',
        'line-height': '360px',
        'font-size': '140px',
        'top': '-150px',
        'right': '-100px'
        },
        100, "linear", function() {


            if(count >= 9) {
                count = 1
            } else {
                count++
            }

            badge2.text(count);


            badge2.delay(300).animate({
                'width': badgeWidth + 'px',
                'height': badgeHeight + 'px',
                'line-height': '180px',
                'font-size': '70px',
                'top': '-60px',
                'right': '-40px',
                'opacity': '1'},
                100, "linear", function(){
                    badge1.fadeOut(600, function(){
                        $(this).remove();
                    });
                });
        });  

}

bars();

var chartbars = $('.chart-bar');

$(chartbars).each(function(i) {

    chartbar = chartbars[i];

    var leftPos = i * 24 + 4;

    $(chartbar).css({'left': leftPos + 'px'});

});

// ppl animations

var height = $('.person').height();    

$('.person').css({'top': -height + 'px'});

var female = function(){
    $('.female').fadeIn(300).animate({'top': '0px'}, 2500, function(){

        male();

        badgeClone();

        $(this).delay(1000).fadeOut(500, function() {
            $(this).css({'top': -height + 'px'});
        });

    });
};

var male = function(){

    $('.male').fadeIn(300).animate({'top': '0px'},2500,function(){
        badgeClone();

        female();

            $(this).delay(1000).fadeOut(500, function() {
            $(this).css({'top': -height + 'px'});
        });
    });
};

male();

   },
   pause: function() {
       var $this = this; 

       $('.chart-bar').stop();


   },
   reset: function() {
        var $this = this;

    $this.count = 0;

   },
    vars: {


   }
});

它正在工作！当我运行anim3.start时，动画将开始。但现在..我怎么能阻止它？因为我必须在用户选择另一个动画幻灯片时停止它，并在用户再次选择此幻灯片时从头开始。

我写了一个简单的代码，只是为了测试..但它不起作用。在上面的代码中，我在暂停时写了$('.chart-bar').stop();，以检查这是否会至少停止一个图表栏动画，但它没有。在重置时，我写了 $this.count = 0;来重置.badge元素上的数字 - 但它也不起作用..

显然，为了运行这些代码行，我在脚本底部放了一个简单的代码（下面的代码）。

$('#slider-2, #slider-3').hide();
$('.tour-slider').on('click', 'li a', function(e){
    e.preventDefault();
    $(this).closest('.slider').hide();
    var sliderHref = $(this).attr('href');
    $(sliderHref).fadeIn();
    if(sliderHref == '#slider-1'){
        anim1.start();
        anim3.pause();

    }else if(sliderHref == '#slider-2'){
        anim2.start();  
        anim3.pause();
    }else if(sliderHref == '#slider-3'){
        anim3.reset();
        anim3.start();   
        anim3.pause();
    }
});

正如你所看到的，我甚至在启动它之后立即运行anim3.pause(); - 只是为了检查，它是否会立即停止 - 但即使是一个图表栏也没有停止.. < / p>

所以现在，有人可以告诉我，我该如何停止（并重置）这些动画元素？我只需要得到一个有效的例子，然后我可以自己休息。

我将不胜感激任何帮助

干杯！

Answer 1

好的，我找到了解决方案。

我修改了一个bars（）函数（添加if语句）

        function bars() {

        var barHeight = 0;
        var loop = true;

        $('.chart-bar').each(function () {

            barHeight = Math.floor(Math.random() * 100);

            $(this).delay(1000).animate({
                'height': barHeight + '%',
                'min-height': '20px'},
                700, function(){

            if (loop) {
                bars();   
            }

             });
        });

    }

然后我需要的是将这两行代码添加到我的暂停方法中：

   pause: function() {
       var $this = this;
       $('#animation-3').find('*').stop(true, false);
       $this.loop = false;
   }

感谢大家的时间：）

如何停止和重置对象中的少数动画元素？（几个单独的动画）

1 个答案:

如何停止和重置对象中的少数动画元素？ （几个单独的动画）

1 个答案:

如何停止和重置对象中的少数动画元素？（几个单独的动画）