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

这是因为你总是将左设置为400，如果你将第二个设置为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',
            })
        });
    });
});

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

OR

你可以使用增量

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 2

<强> 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

中隐藏幻灯片末尾的opacity简单设置otherhalf()为 0

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});

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

3 个答案: