JQuery - 動畫 - 優文庫

我有一個動畫開啓和關閉的權利。所以它滑落並完全消失，然後滑回去。JQuery - 動畫

我不想要的是，當它動起來時，我不希望它完全消失，我希望div的偏移量爲10px。

無論如何實現？

這是JS：

function hideEditorPane(){ 
    //weaponEditor 
    $("#weaponEditor").animate({ 
     //left: '+=150' 
     width: 'toggle' 
     }, 500, function(){ 
    }); 
}

這裏是CSS：

#weaponEditor{ 
    position:absolute; 
    background-image: url(images/editorPane.png); 
    background-repeat: no-repeat; 
    width:200px; 
    height:342px; 
    right:4px; 
    top:4px; 
}

而在HTML，它只是這個：

<div id="weaponEditor"><a href="javascript: hideEditorPane();">click</a></div>

感謝

來源

2011-11-04 Oliver Jones

可能通過更改元素的絕對或相對位置來創建該動畫可能很簡單。但是，我們需要查看HTML和CSS的相關部分，以便爲您的問題提供真正有用的答案。 – dgvid

我已更新我的問題 –

它目前如何回生？因爲它看起來完全脫離了視圖端口或者你是否想要創建該功能？ –

一個posibility：添加overflow: hidden爲#weaponEditor CSS規則，則：

function hideEditorPane(){ 
    //weaponEditor 
    var we = $("#weaponEditor"), 
     newWidth = (we.width() < 20) ? 200 : 10; 
    we.animate({ 
      width: newWidth 
     }, 500, function(){ }); 
}

這將切換10個200像素之間的寬度。

更新：由於Intersteller_Coder正確指出，硬編碼腳本中的寬度是可怕的。如果可能的話，你希望那些留在CSS中。如果切換寬度最終爲您工作，請考慮使用jQuery UI方法toggleClass。爲摺疊寬度設置一個類，爲擴展寬度設置另一個類，然後使用toggleClass在兩者之間切換。

來源

2011-11-04 20:41:52 dgvid

硬編碼的寬度？真的嗎？看起來非常不靈活。 –

是的，我也不太在意，但一次只能一步一步地，你知道嗎？ – dgvid

這仍然會擠壓我的所有內容，EG，如果我擁有「hello world」，當它動畫消失時，每個字母都有自己的換行符。 –

雖然沒有更多的信息很難說清楚並試圖達到你想要達到的目標我會說你想設置寬度來說：10px而不是使用切換。

切換將寬度設定爲0。

因此，使用

function hideEditorPane(){ 
    //weaponEditor 
$("#weaponEditor").animate({ 
    //left: '+=150' 
    width: "10px" 
    }, 500, function(){ 
}); }

例如。

這就是說，如果我正確理解您不希望div完全消失，那麼您希望剩下10px的div，以便稍後可以對它進行一些操作（如將它摺疊並展開）。

來源

2011-11-04 20:32:31 RandomWhiteTrash

這種作品，但當它動畫退出（與偏移量）所有的內容被擠壓，你可以看到一些 –

width:'toggle'實際上是將div從其原始寬度縮小到0，而不是將其滑動到任何地方。如果你想繼續使用這種方法，那麼在div上設置一個min-width:10px，它會阻止jQuery使它小於這個值。

您已註釋的代碼：left: +=150是要使用的代碼類型，如果要將其滑出一定量。這將是像這樣到div向左500像素幻燈：

function hideEditorPane(){ 
    //weaponEditor 
    $("#weaponEditor").animate({ 
     left: '-=500' //<-- however wide the div is, minus 10px. 
     }, 500, function(){ 
    }); 
}

所以很明顯，將其設置幻燈片給你滑動div的寬度要的金額，減去量「大棒出'

希望這有助於。

來源

2011-11-04 20:43:52

JQuery - 動畫

回答

相關問題