在x轴上移动时，从0移动到1到1的动画不透明度

我面临jQuery的问题，我需要你的帮助！在x轴上移动时，从0移动到1到1的动画不透明度

我有一个对象在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

感谢您的时间:)

/特勒尔斯

来源

2014-09-03 thar

请张贴你的代码至今。 – Huangism 2014-09-03 19:56:27

请告诉我们一些代码 – GillesC 2014-09-03 19:56:36

问题已经更新:) – thar 2014-09-03 20:03:28

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到0功能otherhalf()

来源

2014-09-03 20:05:21

嗨有:)谢谢，但这是没有太大的不同，然后： $（'。swipe'）。css（{opacity：0}）; （{opacity：0}）;。 – thar 2014-09-03 20:12:49

它的类似，但你可以注意到我将**从** 50％**增加到** 100％**，导致它沿着x轴全方位移动。到底你想要什么与这不同？ – 2014-09-03 20:18:26

这是因为你设置留给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', 
      }) 
     }); 
    }); 
});

我把在第一个完整功能中的第二个动画也是如此。

可以使用增量

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

来源

2014-09-03 20:13:11 Huangism

嗨黄宗教，那是正确的，但后来我有一个“开始停止开始”动画。我想要一个从起点到终点的流畅动画:) – thar 2014-09-03 20:23:24

也许那么最好用css来实现它http://stackoverflow.com/questions/8449933/animation-css3-display-opacity – Huangism 2014-09-03 20:35:36

@thar我更新了为css方法的答案 – Huangism 2014-09-03 20:46:14

好吧，我只是找到了解决自己:)

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

来源

2014-09-04 06:41:20 thar

在x轴上移动时，从0移动到1到1的动画不透明度

回答

相关问题