Question

我正在尝试创建一个可重复的动画，其中2个值来自链接

上设置的数据属性

这就是我到目前为止所能看到的重复代码太多了。

$(".click").click(function(){
  $(this).delay(400).animate({bottom:'30px'},100);
  $(this).animate({left:'5px'},50);
  $(this).animate({left:'0px'},50);
  $(this).animate({left:'5px'},50);
  $(this).animate({left:'0px'},50);
  $(this).animate({left:'5px'},50);
  $(this).animate({left:'0px'},50);
  $(this).animate({bottom:'0px'},100);
  $(this).animate({bottom:'30px'},100);
  $(this).animate({left:'5px'},50);
  $(this).animate({left:'0px'},50);
  $(this).animate({left:'5px'},50);
  $(this).animate({left:'0px'},50);
  $(this).animate({left:'5px'},50);
  $(this).animate({left:'0px'},50);
  $(this).animate({bottom:'0px'},100);
});
$(".clickRight").click(function(){
  $(this).delay(200).animate({bottom:'30px'},100);
  $(this).animate({right:'5px'},50);
  $(this).animate({right:'0px'},50);
  $(this).animate({right:'5px'},50);
  $(this).animate({right:'0px'},50);
  $(this).animate({right:'5px'},50);
  $(this).animate({right:'0px'},50);
  $(this).animate({bottom:'0px'},100);
  $(this).animate({bottom:'30px'},100);
  $(this).animate({right:'5px'},50);
  $(this).animate({right:'0px'},50);
  $(this).animate({right:'5px'},50);
  $(this).animate({right:'0px'},50);
  $(this).animate({right:'5px'},50);
  $(this).animate({right:'0px'},50);
  $(this).animate({bottom:'0px'},100);;
});

理想情况下，我想要发生的是用户点击一个链接，延迟是从数据延迟和左边设置的right是从data-pos设置的，例如

<a href="#" data-delay="400" data-pos="left">click Left</a>
<a href="#" data-delay="200" data-pos="right">click Right</a>

然后我需要这个动画只运行两次，上面的值设置为适当的

$(this).delay(400).animate({bottom:'30px'},100);
      $(this).animate({left:'5px'},50);
      $(this).animate({left:'0px'},50);
      $(this).animate({left:'5px'},50);
      $(this).animate({left:'0px'},50);
      $(this).animate({left:'5px'},50);
      $(this).animate({left:'0px'},50);
      $(this).animate({bottom:'0px'},100);

Answer 1

您不能将变量用作动画的属性名称，因此您可以创建包含这些特定属性的匿名对象来设置动画：

$(function() {
    $(".click").on("click", function () {
        // You can't use a variable as a property
        // name for the animation, so you can create
        // anonymous objects containing these particular
        // properties to animate.
        var direction1 = {};
        direction1[$(this).data("pos")] = "5px";
        var direction2 = {};
        direction2[$(this).data("pos")] = "0px";

        // These below are just to simplify.
        var direction3 = {};
        direction3["bottom"] = "30px";
        var direction4 = {};
        direction4["bottom"] = "0px";

        // The delay.
        var delay = $(this).data("delay");

        // Here, instead of repeating the $(this) selector, you can
        // just chain the .animate() calls.
        $(this)
            .delay(delay)
            .animate(direction3, 100)
            .animate(direction1, 50)
            .animate(direction2, 50)
            .animate(direction1, 50)
            .animate(direction2, 50)
            .animate(direction1, 50)
            .animate(direction2, 50)
            .animate(direction4, 100)
            .animate(direction3, 100)
            .animate(direction1, 50)
            .animate(direction2, 50)
            .animate(direction1, 50)
            .animate(direction2, 50)
            .animate(direction1, 50)
            .animate(direction2, 50)
            .animate(direction4, 100);
    });
});

Demo

具有来自数据属性的变量的可重复动画

1 个答案: