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

Posted 2023-03-06

【中文标题】在 x 轴上移动时将不透明度从 0 设置为 1 到 1

【英文标题】：Animate opacity from 0 to 1 to 1 while moving on x axis

【发布时间】：2014-10-28 10:38:39

【问题描述】：

我遇到了 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

感谢您的宝贵时间 :)

/巨魔

【问题讨论】：

请发布您目前拥有的代码。

请给我们一些代码

问题已更新:)

【参考方案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

【讨论】：

你好 :) 谢谢，但这和这个没什么不同： $('.swipe').css(opacity: 0); $('.swipe').animate(opacity: 1, left: '200').animate(opacity: 0);

类似，但您可以注意到我将 left 从 50% 增加到 100% 导致它沿 x 轴移动。您到底想要什么与此不同？

【参考方案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;

【讨论】：

嗨 Huangism，没错，但是我有一个“开始停止开始”动画。我想要一个从起点到终点的流畅动画:)

或许那最好用css做***.com/questions/8449933/…

【参考方案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);