在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的動畫不透明度

回答

相關問題