用左滑動畫替換div

我想通過幻燈片動畫替換div的內容;第一個div滑到盒子外面（隱藏），而第二個滑入。用左滑動畫替換div

我試過了;

不過，這並不似乎做任何事情。我究竟做錯了什麼？

 var $oldBox = $("#signup .box[data-step=1]"); 
     var $newBox = $("#signup .box[data-step=2]"); 

     var outerWidth = $oldBox.outerWidth(true); 
     var posSlideOut = (2 > 1 ? -outerWidth : outerWidth); 
     var posSlideIn = (2 > 1 ? outerWidth : -outerWidth); 

     $.when($oldBox.animate({left: posSlideOut}, "slow"), $newBox.css("left", posSlideIn + "px").animate({"left": 0}, "slow"));

來源

2014-09-23 Wesley

你不會以任何方式觸發動畫。你只是宣佈它。 – 2014-09-23 20:25:40

你的代碼看起來不錯，但它永遠不會工作。我的意思是，它永遠不會執行。我現在可以看到的唯一問題是，您從不觸發$ oldBox的動畫。所以，永遠不會看到執行。 – Academia 2014-09-23 20:26:55

css屬性['position']（http://www.w3schools.com/cssref/pr_class_position.asp）的默認值是'static'，所以改變['left']（http：// www。 w3schools.com/cssref/pr_pos_left.asp）屬性不會產生任何影響，除非你把'position'改成''relative''類似的東西 – Stryner 2014-09-23 20:40:15

這裏是我的更新來獲取JavaScript的工作

jsfiddle

主要的變化是，我添加了$(document).on('click')事件觸發動畫和切換left到margin-left，因爲你不使用相對或固定位置

這應該讓你朝着正確的方向

更新：

而且，我添加JavaScript從你的第二個div

來源

2014-09-23 20:32:17

謝謝，只有1個問題，我怎麼能得到第二個盒子沿着第一個盒子呢，它應該滑入（從右到左），因爲另一個盒子正在滑出。 – Wesley 2014-09-24 07:01:45

從javascript的角度來看，您只需交換'$ newBox'的邊距值並從'$ oldBox'動畫回調中取出'$ newBox'動畫，讓它們同時觸發。對於CSS，你將需要利用相對/絕對定位。下面是一個工作示例：[jsfiddle]（http://jsfiddle.net/DTcHh/1227/） – 2014-09-24 14:58:52

噢，現在它確實使用了'relative/absolute'定位，您可以使用'left'和'right' 'margin-left'和'margin-right'。修復了上一個註釋示例中存在的填充問題：[jsfiddle]（http://jsfiddle.net/DTcHh/1231/） – 2014-09-24 16:22:40

GreenSock Animation Platform (GSAP)與TweenLite/TweenMax刪除"display: hidden;"。與jQuery或CSS3轉換相比，它提供了更平滑的轉換以及更多的自定義功能。爲了使用TweenLite/TweenMax爲CSS屬性製作動畫，您還需要名爲「CSSPlugin」的插件。 TweenMax自動包含此功能。

首先，加載TweenMax庫：

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>

或輕型版本，TweenLite的：

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/plugins/CSSPlugin.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/easing/EasePack.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenLite.min.js"></script>

然後，打電話給你的動畫：

var myObj= document.getElementById("myDiv"); 

// Syntax: (target, speed, {distance, ease}) 
TweenLite.to(myObj, .7, { x: 500, ease: Power3.easeOut});

您也可以使用一個ID選擇叫它：

TweenLite.to("#myID", .7, { x: 500, ease: Power3.easeOut});

如果您有jQuery的加載，可以使用更先進的廣泛選擇，如包含特定類的所有元素：

// This will parse the selectors using jQuery's engine. 
TweenLite.to(".myClass", .7, { x: 500, ease: Power3.easeOut});

有關詳情，請參閱： TweenLite Documentation

根據他們的網站： 「TweenLite是一個非常快速，輕量級和靈活的動畫工具，作爲GreenSock動畫平臺（GSAP）的基礎。」

來源

2015-11-05 18:21:47 TetraDev

用左滑動畫替換div

回答

相關問題