Hiệu ứng trượt có thể di chuyển JQuery-Mobile

Question

Tôi muốn thêm hiệu ứng slideDown hoặc slideUp vào div với data-role='collapsible', vì vậy nó sẽ không mở cùng một lúc mà là dần dần.

Tôi đã thử này:

$('#my-collapsible').live('expand', function() {  
    $('#my-collapsible .ui-collapsible-content').slideDown(2000); 
});  
$('#my-collapsible').live('collapse', function() { 
    $('#my-collapsible .ui-collapsible-content').slideUp(2000); 
}); 

Nhưng nó vẫn mở ra và đóng lại ngay lập tức.

Bất kỳ ai cũng biết tôi nên gọi những phương thức slideDown và slideUp như thế nào?

Answer 1

sống Ví dụ:

• http://jsfiddle.net/6txWy/6/
• http://jsfiddle.net/6txWy/7/

JS

$('#my-collaspible').bind('expand', function() { 
    $(this).children().slideDown(2000); 
}).bind('collapse', function() { 
    $(this).children().next().slideUp(2000); 
}); 

HTML

<div data-role="page"> 
    <div data-role="content"> 
     <div data-role="collapsible" id="my-collaspible"> 
      <h3>My Title</h3> 
      <p>My Body</p> 
     </div> 
    </div> 
</div> 

Answer 2

Đối với một số lý do giải pháp Phill đã không làm việc trong môi trường của tôi, nhưng một phiên bản sửa đổi một chút đã, có lẽ ai đó sẽ có sử dụng điều này:

$(document).on('expand', '.ui-collapsible', function() { 
    $(this).children().next().hide(); 
    $(this).children().next().slideDown(200); 
}) 

$(document).on('collapse', '.ui-collapsible', function() { 
    $(this).children().next().slideUp(200); 
}); 

này cũng làm việc trực tiếp trên tất cả các yếu tố đóng mở trong jquery di động bởi vì nó sử dụng công cụ chọn có thể thu thập .ui, tất cả các phần tử có thể thu gọn đều có

Answer 3

Có thể là một câu hỏi cũ, nhưng jQuery Mobile đã thay đổi rất nhiều kể từ đó.

Dưới đây là một ví dụ sinh động làm việc trên một tập gấp: http://jsfiddle.net/jerone/gsNzT/

/*\ 
Animate collapsible set; 
\*/ 
$(document).one("pagebeforechange", function() { 

    // animation speed; 
    var animationSpeed = 200; 

    function animateCollapsibleSet(elm) { 

     // can attach events only one time, otherwise we create infinity loop; 
     elm.one("expand", function() { 

      // hide the other collapsibles first; 
      $(this).parent().find(".ui-collapsible-content").not(".ui-collapsible-content-collapsed").trigger("collapse"); 

      // animate show on collapsible; 
      $(this).find(".ui-collapsible-content").slideDown(animationSpeed, function() { 

       // trigger original event and attach the animation again; 
       animateCollapsibleSet($(this).parent().trigger("expand")); 
      }); 

      // we do our own call to the original event; 
      return false; 
     }).one("collapse", function() { 

      // animate hide on collapsible; 
      $(this).find(".ui-collapsible-content").slideUp(animationSpeed, function() { 

       // trigger original event; 
       $(this).parent().trigger("collapse"); 
      }); 

      // we do our own call to the original event; 
      return false; 
     }); 
    } 

    // init; 
    animateCollapsibleSet($("[data-role='collapsible-set'] > [data-role='collapsible']")); 
}); 

Answer 4

Đây là đu tôi mà tôi cần thiết cho các công cụ lồng nhau.

// look for the ui-collapsible-content and collapse that 
// also need the event (which is an arg) to stop the outer expander from taking action. 
$(document).on('expand', '.ui-collapsible', function(event) { 
    var contentDiv = $(this).children('.ui-collapsible-content'); 
    contentDiv.hide(); 
    contentDiv.slideDown(300); 
    event.stopPropagation(); // don't bubble up 
}) 

$(document).on('collapse', '.ui-collapsible', function(event) { 
     var contentDiv = $(this).children('.ui-collapsible-content'); 
     contentDiv.slideUp(300); 
    event.stopPropagation(); // don't bubble up 
}); 

Answer 5

Dưới đây là câu trả lời tuyệt vời jerone cho jQuery Mobile 1.4 (tên sự kiện thay đổi chút ít, dữ liệu-role = "collapsibleset" bây giờ dữ liệu role = "collapsibleset"):

/*\ 
Animate collapsible set; 
\*/ 
$(document).one('pagecreate', function() { 

    // animation speed; 
    var animationSpeed = 500; 

    function animateCollapsibleSet(elm) { 

    // can attach events only one time, otherwise we create infinity loop; 
    elm.one('collapsibleexpand', function() { 

     // hide the other collapsibles first; 
     $(this).parent().find('.ui-collapsible-content').not('.ui-collapsible-content-collapsed').trigger('collapsiblecollapse'); 

     // animate show on collapsible; 
     $(this).find('.ui-collapsible-content').slideDown(animationSpeed, function() { 

     // trigger original event and attach the animation again; 
     animateCollapsibleSet($(this).parent().trigger('collapsibleexpand')); 
     }); 

     // we do our own call to the original event; 
     return false; 
    }).one('collapsiblecollapse', function() { 

     // animate hide on collapsible; 
     $(this).find('.ui-collapsible-content').slideUp(animationSpeed, function() { 

     // trigger original event; 
     $(this).parent().trigger('collapsiblecollapse'); 
     }); 

     // we do our own call to the original event; 
     return false; 
    }); 
    } 

    // init; 
    animateCollapsibleSet($('[data-role="collapsibleset"] > [data-role="collapsible"]')); 
});