Question

所以我正在制作一种动画调查。当您单击每个问题的每个答案时，相应的圆圈会向右移动。

对我来说棘手的部分是，在第一个问题之后....让我说有人点击第一个问题的'Answer1'，然后在第二个问题上点击'Answer1'，然后在第二个问题上点击'Answer2' ..而不是初始圆圈动画回到它的原始大小，（正如我已定义）我需要它动画下降到一个百分比，以便两个圆现在相等，因为在上一个问题中选择了一个。有点像切换。

有意义吗？

这部分对我来说有点棘手，因为我正在深入研究JS / Jquery。任何帮助或建议将不胜感激！

这是我为Question1撰写的JS。

正如你所看到的，我让圈子动画回到80px只是为了Question1 ...但我知道其他问题，需要以某种方式按百分比配置（这是我被卡住的地方）

/*myClick function - quiz1*/
function myClick() { /*answer1*/
$('ul li:nth-child(2)').on("click", function() {
    if ($(this).hasClass('active') === false) {
        $(this).addClass('active');
        $(this).siblings().addClass('deactive');
        $(this).siblings().removeClass('active');
        $(this).removeClass('deactive');
        if ($(this).hasClass('active')) {
            $('.circle1').animate({
                width: "+=3.0%",
                height: "+=3.0%"
            });
            percentage.html(1);
        }
        if ($('ul li:nth-child(3)').hasClass('deactive')) {
            $('.circle2').animate({
                width: "80px",
                height: "80px"
            });
            percentage2.html(0);
        }
          if ($('ul li:nth-child(4)').hasClass('deactive')) {
            $('.circle3').animate({
                width: "80px",
                height: "80px"
            });
           percentage3.html(0);
        }
    }
 }); /*answer2*/
 $('ul li:nth-child(3)').on("click", function() {
    if ($(this).hasClass('active') === false) {
        $(this).addClass('active');
        $(this).siblings().addClass('deactive');
        $(this).siblings().removeClass('active');
        $(this).removeClass('deactive');
        if ($(this).hasClass('active')) {
            $('.circle2').animate({
                width: "+=3.0%",
                height: "+=3.0%"
            });
          percentage2.html(1);   

        }
        if ($('ul li:nth-child(2)').hasClass('deactive')) {
            $('.circle1').animate({
                width: "80px",
                height: "80px"
            });
            percentage.html(0); 

        }
          if ($('ul li:nth-child(4)').hasClass('deactive')) {
            $('.circle3').animate({
                width: "80px",
                height: "80px"
            });
           percentage3.html(0); 
        }
      }
    }); /*answer3*/
    $('ul li:nth-child(4)').on("click", function() {
    if ($(this).hasClass('active') === false) {
        $(this).addClass('active');
        $(this).siblings().addClass('deactive');
        $(this).siblings().removeClass('active');
        $(this).removeClass('deactive');
        if ($(this).hasClass('active')) {
            $('.circle3').animate({
                width: "+=3.0%",
                height: "+=3.0%"
            });
             percentage3.html(1); 
        }
        if ($('ul li:nth-child(2)').hasClass('deactive')) {
            $('.circle1').animate({
                width: "80px",
                height: "80px"
            });
            percentage.html(0); 

        }
          if ($('ul li:nth-child(3)').hasClass('deactive')) {
            $('.circle2').animate({
                width: "80px",
                height: "80px"
            });
            percentage2.html(0); 

            }
        }
    });
  }

我知道这有点密集，所以任何类型的帮助，提示或其他什么都会非常棒。谢谢！

这是fiddle

Jquery切换轮询，基于答案的动画

0 个答案: