Geek asks and answers

JQuery mobile add animation to folding set

I would like to add animation to the kit with jQuery Mobile . Let me show you a simple example:

<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 does a great job and shows me a folding set of 3 elements. I want ANIMATION, but I don't seem to find anything in the docs.

I have not tested how simple CSS animations (animation of the height property) would work, however, is there any way jQuery Mobile does this, like turning some kind of internal flag

EDIT I tested a simple jQuery animation method and it really works. Just in case someone needs it. It runs smoothly even on my phone with a frequency of 528 MHz in the default browser. The added snippet is really simple:

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

Here ya go:

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

I liked the idea you came up with, so I played with it a bit. This is because jQuery Mobile controls collapsible widgets, so it’s a bit less hacked and then snapped to the title element.

return false; , / jQuery slideUp/slideDown. .fadeToggle() . event.type, .

: http://jsfiddle.net/VtVFB/

+6

, jQuery Mobile 1.4 collapsibleexpand collapsiblecollapse expand collapse. ,

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

. jQuery , .

:

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

The accepted answer does not take into account that it does not change the resettable cursor due to the return false, so this is my answer:

In my project, the content related to [date-role="collapsible"]was$(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();
        }
    });
});
0
source

More articles:


All Articles