在 x 轴上移动时将不透明度从 0 设置为 1 到 1

Question

我遇到了 jQuery 的问题，我需要你的帮助！

我有一个物体在 x 轴上从一个点移动到另一个点。我真正想要实现的是这个对象不透明度的动画，从 0 到 1 再到 0，在完全相同的时间，对象从凝视点​​移动到终点。

我一直在尝试做的是：

$('.swipe').css({opacity: 0});
$('.swipe').animate({opacity: 1, left: '400'}, 1000);
$('.swipe').animate({opacity: 0, left: '800'}, 1000);

这给了我一个“开始停止开始”的动画，而不是我想要的这种流畅的动画:)

示例：

START >>>>>>>>>>>>>>>>>> MIDDLE >>>>>>>>>>>>>>>>>>> END
OPC:0 >>>>>>>>>>>>>>>>>> OPC: 1 >>>>>>>>>>>>>>>>>>> OPC:0

感谢您的宝贵时间 :)

/巨魔

Answer 1

HTML

<button>Start Animation</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute; opacity:0;">
</div>

jQuery

$(document).ready(function(){
$("button").click(function(){
    onehalf();
    otherhalf();
  });
 function onehalf(){
 $("div").animate({
      left:'50%',
      opacity:'1',
    });
 }
function otherhalf(){
 $("div").animate({
      left:'100%',
      opacity:'0.1',
    });
 }
});

DEMO

如果你想隐藏幻灯片结束处的div，在函数otherhalf()中将opacity设置为0

Answer 2

发生这种情况是因为您始终将 left 设置为 400，如果您将第二个设置 left 为 800，它将起作用

http://jsfiddle.net/oesw6onk/2/

$(document).ready(function () {
    $("button").click(function () {
        $("div").animate({
            left: '400',
            opacity: '1',
        }, function () {
            $("div").animate({
                left: '800',
                opacity: '0',
            })
        });
    });
});

我把第二个动画也放在了第一个的完整功能中。

或

你可以使用增量

http://jsfiddle.net/oesw6onk/3/

$(document).ready(function () {
    $("button").click(function () {
        $("div").animate({
            left: '+=400',
            opacity: '1',
        }, function () {
            $("div").animate({
                left: '+=400',
                opacity: '0',
            })
        });
    });
});

您可能希望在此版本的最终动画完成后再次将左侧设置为 0，因为您可以看到，每次单击按钮时，该框都会向右保持 400 像素。

左侧重置示例http://jsfiddle.net/oesw6onk/4/

CSS 选项

http://jsfiddle.net/oesw6onk/6/

@-webkit-keyframes NAME-YOUR-ANIMATION {
    0% {
        opacity: 0;
        left: 0;
    }
    50% {
        opacity: 1;

    }
    100% {
        opacity: 0;
        left: 800px;
    }
}
@-moz-keyframes NAME-YOUR-ANIMATION {
    0% {
        opacity: 0;
        left: 0;
    }
    50% {
        opacity: 1;

    }
    100% {
        opacity: 0;
        left: 800px;
    }
}
@-o-keyframes NAME-YOUR-ANIMATION {
    0% {
        opacity: 0;
        left: 0;
    }
    50% {
        opacity: 1;

    }
    100% {
        opacity: 0;
        left: 800px;
    }
}
@keyframes NAME-YOUR-ANIMATION {
    0% {
        opacity: 0;
        left: 0;
    }
    50% {
        opacity: 1;

    }
    100% {
        opacity: 0;
        left: 800px;
    }
}
div {
    -webkit-animation: NAME-YOUR-ANIMATION 2s infinite;
    -moz-animation: NAME-YOUR-ANIMATION 2s infinite;
    -o-animation: NAME-YOUR-ANIMATION 2s infinite;
    animation: NAME-YOUR-ANIMATION 2s infinite;
}

Answer 3

好的，我自己也找到了解决办法：）

$('.swipe').css({opacity: 0});
$('.swipe').animate({opacity: 1}, {duration: 1000});
$('.swipe').animate({opacity: 0}, {duration: 1000});
$('.swipe').animate({left: 400}, {duration: 2000, queue: false});