Search code examples
jquerycssjquery-mobilejquery-mobile-flipswitch

JQuery Mobile - How to set Flip toggle switch slide Duration


I'm trying to use the "Flip Toggle Switch" the jQuery Mobile library. But I think the cursor animation is a bit too fast ... Does anyone know a way to change the duration of the animation? I have already looked inside the. js of jQuery and jQuery Mobile, but I found nothing.

Here is my JSFIDDLE and code snippet :

<div data-role="content">
    <form action="#" class="foo" method="get">
        <p>
            <select id="modeLocation" class="ui-toggle-switch" data-role="slider">
                <option value="Courte"></option>
                <option value="Longue"></option>
            </select><span id="togshow">Courte</span>

        </p>
    </form>
</div>

JS

$("#modeLocation").change(function () {
    type = $("#modeLocation").val();

    $('#togshow').text(type.toString());
});

Thank you in advance


Solution

  • You were looking at all wrong places :)

    Working example: http://jsfiddle.net/Gajotres/TTGbS/

    CSS:

    .ui-slider-handle-snapping {
        transition: left 470ms linear 0s !important;
    }
    

    Just change 470ms to any time measured in miliseconds.