QuickSand, анимация заикания - PullRequest
Новая
       25

QuickSand, анимация заикания

3 голосов
/ 20 июня 2011

Я потратил целую вечность, выясняя, как заставить зыбучие пески работать с формой выбора и опции вместо ссылок href. Теперь у меня проблемы, потому что анимация заикается. Я не могу получить это гладко. Он начинается хорошо, а затем возвращается влево. Вы можете увидеть онлайн пример:

http://freecss.info/ScreencastTutorials/archive.html

Есть идеи? Я думал о многих вещах и экспериментировал, но не повезло. Другие сценарии совместимы, попытались изменить фиксированную ширину и попытались добавить div-держатель с переполнением: hidden.

Соответствующий jquery: 

var $holder = $('ul#archive-full');
var $data = $holder.clone();
var mySelect = $('#mySelect');
mySelect.change(function() {
    var index = mySelect[0].selectedIndex;
    var element = mySelect[0].options[index];
    var $filterType = $(element).attr('value')
    if ($filterType == 'all') {
        var $filteredData = $data.find('li:not(li ul li)');
    }
    else {
        var $filteredData = $data.find('li[data-type~="' + $filterType + '"]');
    }
    $holder.quicksand($filteredData, {
        duration: 800,
        easing: 'easeInOutQuad'
    });
    return false;
});

Соответствующий HTML 

<select name="mySelect" id="mySelect" selected value="all">
 <option name="all" value="all">Free & Premium</option>
 <option name="free" value="free">Free Only</option>
 <option name="premium" value="premium">Premium Only</option>
</select>
<ul id="archive-full">
 <li data-id="id-1" data-type="all premium">/li>
</ul>

1 Ответ

4 голосов
/ 20 июня 2011

Для Михаэля:

Проблема заключалась в том, чтобы использовать тот же идентификатор для стилизации неупорядоченного списка и анимации неупорядоченного списка с помощью jQuery.

Чтобы решить эту проблему, просто добавьте класс в неупорядоченный список и используйте его для стилизации с использованием CSS.Затем используйте оригинальный идентификатор для выполнения анимации jQuery, например: 

<ul id="archive-full" class="archive-style">
...