jQuery移動添加動畫到可摺疊集

我想添加一個動畫到可摺疊集jQuery Mobile。讓我給的一個簡單的例子：jQuery移動添加動畫到可摺疊集

<div id="tiles" data-role="collapsible-set" data-iconpos="right"> 
    <div class="tile" data-role="collapsible" data-iconpos="right">blablabla</div> 
    <div class="tile" data-role="collapsible" data-iconpos="right">blablabla</div> 
    <div class="tile" data-role="collapsible" data-iconpos="right">blablabla</div> 
</div>

jQuery Mobile的完美地處理這個問題，並顯示我可壓縮集的3項。我想要的是動畫，但我似乎沒有在文檔中找到任何內容。

我還沒有測試過多麼簡單CSS動畫（動畫height屬性）會的工作，但有沒有這樣做它像打開一些內部標誌的jQuery Mobile的方式？

編輯我測試了一個簡單的jQuery動畫方法，它實際上工作。以防萬一其他人需要這個。即使在默認瀏覽器上，我的528MHz Android手機也能順利運行。我添加了一個片段是非常簡單的：

$(".ui-collapsible-heading").live("click", function(event, ui) { 
    $(this).next().css('height', '0').animate({ 
     height: '100px' 
    }); 
});

來源

2012-05-03 lukas.pukenis

不開箱。我認爲問題是在「展開」或「摺疊」過渡期間處理頁面/視口尺寸（又稱高度）。現在你點擊一個可摺疊的圖標，當可摺疊圖標打開時，相關的高度會被更新。做這個「過渡期」可能看起來很糟糕，除了資源過濾器。您仍然可以嘗試通過添加/刪除相應的過渡類（在JQM CSS中向外滑動/向下滑動）到JQM可摺疊小部件中的展開和摺疊事件。然後看看會發生什麼:-) – frequent

@頻繁的jQuery Mobile暴露了可摺疊小部件的'expand'和'collapse'事件。如果綁定到這些事件，則可以停止默認行爲並改爲使事件動畫化。請參閱下面的答案。 – Jasper

@Jasper我知道這些事件，不知道他們是暴露的。謝謝！我還將JQM css3類用於非頁面元素。可摺疊的困難部分是它們是「內聯/靜態」元素（相對於絕對定位）。所以，當我在內聯元素上使用css3動畫時，我無法在轉換過程中更新頁面填充等內容。所以在ios4上，例如使用polyfill固定頁腳，在轉換過程中頁腳將被推出視圖 - 這不是一個嚴重的問題，但仍然... – frequent

這裏亞去：

$('[data-role="collapsible"]').bind('expand collapse', function (event) { 
    $(this).find('p').slideToggle(500); 
    return false; 
});

我喜歡你所追求的，所以我用它打了一下週圍的想法。這與jQuery Mobile控制可摺疊小部件的方式掛鉤，所以它不像hacky那樣綁定到標題元素。

return false;停止默認行爲，另一行使用jQuery slideUp/slideDown動畫切換視圖中的內容。您也可以使用.fadeToggle()或滾動您自己的動畫。如果您選中event.type，則可以根據所發生的事件進行動畫製作。

這裏是一個演示：http://jsfiddle.net/VtVFB/

來源

2012-05-03 23:52:32 Jasper

感謝您的改進解決方案 –

我沒有很多的HTML經驗，但我搞亂jquery移動權利現在。這段代碼片段究竟會去哪裏？ – Ryan

@Ryan我會把這段代碼放在一個特定的頁面或一組頁面的'pageinit'事件處理程序中：'$（document）.on（「pageinit」，「#somePageID，#someOtherPageID」，function（）{.. 。在這裏輸入代碼...}）;'。這個'pageinit'事件處理程序應該在全局範圍內運行。 – Jasper

代碼並不完全正確。它覆蓋了展開摺疊事件的默認jquery移動實現，但不處理展開摺疊圖標的更改。

更好的代碼將是：

$('[data-role="collapsible"] h3:first').bind('click', function (event) { 
    $(this).next('p').slideToggle(500); 
    return false; 
});

來源

2013-05-28 05:06:49

請注意，jQuery Mobile的1.4和高達你需要綁定到collapsibleexpand和collapsiblecollapse事件，而不是expand和collapse。因此，完整的代碼變得

$('[data-role="collapsible"]').on('collapsibleexpand collapsiblecollapse', function(event) { 
    $(this).find('p').slideToggle(500); 
    return false; 
});

來源

2014-08-29 07:31:58

這對我有用，你能解釋一下這個選擇器是如何工作的嗎？'$（'[data-role =「collapsible」]'）' –

接受的答案犯規賬戶，它並沒有改變，因爲回報虛假的可摺疊光標，所以這就是我的回答工作：

在我的項目是相對於內容在[date-role="collapsible"]是$(this).find('>*:not(h3)')

/* animate collapsible-set */ 
$('[data-role="collapsible"]').on('expand', function (event) { 
    $(this).find('>*:not(h3)').each(function() { 
     if (!$(this).is(':visible')) { 
      $(this).stop().slideToggle(); 
     } 
    }); 
}).on('collapse', function (event) { 
    $(this).find('>*:not(h3)').each(function() { 
     if ($(this).is(':visible')) { 
      $(this).stop().slideToggle(); 
     } 
    }); 
});

來源

2015-08-25 21:22:21 Prozi

jQuery移動添加動畫到可摺疊集

回答

相關問題