0

私は自分のサイトでjQuery流砂プラグインを使用していますが、現時点では、その下のフッターがジャンプして、フィルターオプションを変更すると、流砂画像と一緒にスムーズに上に移動しません。

どうすればこれを修正できますか？

コード：

<div class="filterContainer">

            <span class="filter">Designer Filter:</span>

            <ul id="filterOptions">
                <li class="active"><a href="#" class="all">All</a></li>
                <li><a href="#" class="bisque">Bisque</a></li>
                <li><a href="#" class="radart">RadArt</a></li>
                <li><a href="#" class="vogue">Vogue</a></li>
                <li><a href="#" class="zehnder">Zehnder</a></li>
            </ul>

        </div>

        <!-- Radiator Showcase Image -->
        <ul class="imageHolder">
            <li class="item" data-id="id-1" data-type="radart">
                <img src="<?php echo base_url(); ?>images/radart/city-lights.jpg" alt="Radart Tripple City Lights Radiator" />
            </li>
            <li class="item" data-id="id-2" data-type="bisque">
                <img src="<?php echo base_url(); ?>images/bisque/seta.jpg" alt="Bisque Seta Radiator"/>
            </li>
            <li class="item" data-id="id-3" data-type="zehnder">
                <img src="<?php echo base_url(); ?>images/zehnder/zehnder-bay-2.png" alt="Zehnder Bay Radiator" />
            </li>
            <li class="item" data-id="id-4" data-type="zehnder">
                <img src="<?php echo base_url(); ?>images/zehnder/fassane-mirror.jpg" alt="Zehnder Fassane Mirror Radiator"/>
            </li>
            <li class="item" data-id="id-5" data-type="vogue">
                <img src="<?php echo base_url(); ?>images/vogue/1.jpg" alt="Vogue Radiator"/>
            </li>
            <li class="item" data-id="id-6" data-type="bisque">
                <img src="<?php echo base_url(); ?>images/bisque/b2.jpg" alt="Bisque b2 Radiator" />
            </li>
            <li class="item" data-id="id-7" data-type="bisque">
                <img src="<?php echo base_url(); ?>images/bisque/chime.jpg" alt="Bisque Chime Radiator" />
            </li>
            <li class="item" data-id="id-8" data-type="bisque">
                <img src="<?php echo base_url(); ?>images/bisque/orbit.jpg" alt="Bisque Orbit Radiator" />
            </li>
            <li class="item" data-id="id-9" data-type="zehnder">
                <img src="<?php echo base_url(); ?>images/zehnder/fassane.jpg" alt="Zehnder Fassane Radiator"/>
            </li>
            <li class="item" data-id="id-10" data-type="bisque">
                <img src="<?php echo base_url(); ?>images/bisque/svelte.jpg" alt="Bisque Svelte Radiator"/>
            </li>
        </ul>   

    </div>

    <div class="clear"></div>

    <!-- Footer -->
    <div class="footer">

        <div class="brands">
            <img src="<?php echo base_url(); ?>images/logos/full.png" />
        </div>
     </div>

jQuery

$(document).ready(function() {
    // get the action filter option item on page load
    var $filterType = $('#filterOptions li.active a').attr('class');

    // get and assign the ourHolder element to the
    // $holder varible for use later
    var $holder = $('ul.imageHolder');

    // clone all items within the pre-assigned $holder element
    var $data = $holder.clone();

    // attempt to call Quicksand when a filter option
    // item is clicked
    $('#filterOptions li a').click(function(e) {
        // reset the active class on all the buttons
        $('#filterOptions li').removeClass('active');

        // assign the class of the clicked filter option
        // element to our $filterType variable
        var $filterType = $(this).attr('class');
        $(this).parent().addClass('active');
        if ($filterType == 'all') 
        {
            // assign all li items to the $filteredData var when
            // the 'All' filter option is clicked
            var $filteredData = $data.find('li');
        }
        else 
        {
            // find all li elements that have our required $filterType
            // values for the data-type element
            var $filteredData = $data.find('li[data-type=' + $filterType + ']');
        }

        // call quicksand and assign transition parameters
        $holder.quicksand($filteredData, {
            duration: 800,
            easing: 'easeInOutQuad'
        });

        $

        $('.ul.imageHolder').slideDown('slow', function() {

        });

        return false;
    });
});
4

1 に答える 1

3

パラメータ「adjustHeight」のデフォルトは「auto」です。"adjustHeight" を "dynamic" に指定すると、よりスムーズになるはずです。

これの代わりに：

 
$holder.quicksand($filteredData, {
            持続時間: 800,
            イージング: 'easeInOutQuad'
        });

次のようになります。

$holder.quicksand($filteredData, {
            adjustHeight: 'dynamic', // これが探している行です。
            持続時間: 800,
            イージング: 'easeInOutQuad'
        });

一番。

于 2012-07-31T19:24:07.000 に答える