JQuery ползунок вверх и вниз - PullRequest
Новая
       49

JQuery ползунок вверх и вниз

0 голосов
/ 09 января 2012

У меня проблемы с функцией слайдинга jQuery и функции slideUp. При нажатии на кнопку div скользит вниз, чтобы показать больше контента - однако, когда он скользит вниз, он плавно опускается на полпути вниз, тогда ему нравятся заикания - но когда я нажимаю меньше информации, чтобы вернуть div вверх, он плавно переходит вверх. Как я могу убедиться, что он скользит плавно, без перерывов в переходе? 

<script type="text/javascript">
    $(document).ready(function () {
        // $(".image-gallery ul li:gt(5)").hide(0);
        $(".inner p:gt(2)").hide(0);

        $('a.moreInfoLink').toggle(
            function () {
                $('.inner p:gt(2)').slideDown(1000);
                $(this).text("Less info");
            },
            function () {
                $('.inner p:gt(2)').slideUp(1000);
                $(this).text("More info");
            }
        );
    });
</script>

HTML / .NET Coding 

<div class="slideContent">
    <div class="inner">
        <energy:TextPod ID="TextPod1" runat="server" CssClass="client-portfolio-intro" />
    </div>
</div>
<div class="clear-me"></div>

<div class="btnMoreInfo">
    <a class="moreInfoLink" href="javascript:;">More Information</a>
</div>

Ответы [ 2 ]

2 голосов
/ 09 января 2012

Не уверен, если решение вашей проблемы, но просто для хорошей практики, сохраните ваши выборы в переменных и используйте их вместо этого, чтобы jQuery не нуждался в поиске элементов при каждом вызове функции переключения: 

<script type="text/javascript">
    $(document).ready(function () {
        // $(".image-gallery ul li:gt(5)").hide(0);
        var content = $('.inner p:gt(2)'); // storing selection
        content.hide(0);

        $('a.moreInfoLink').toggle(
            function () {
                content.slideDown(1000);
                $(this).text("Less info");
            },
            function () {
                content.slideUp(1000);
                $(this).text("More info");
            }
        );
    });
</script>
0 голосов
/ 09 января 2012

Проблема связана с производительностью - браузеры могут зависнуть при попытке анимировать сразу несколько элементов, особенно если эти элементы приводят к тому, что документ ' reflowed '.По сути, ваш селектор $('.inner p:gt(2)') заставляет все элементы <p> анимироваться независимо, а каждый из них вызывает переформатирование документа в каждой точке.

Для плавного перехода попробуйте анимировать один содержащий элемент, который переноситсявсе, что вы хотите показать / скрыть.Я бы использовал HTML что-то вроде: 

<div class="slideContent">
    <div class="inner">
        <p>Something</p>
        <p>Something</p>
        <div class="fullInfo">
            <p>Something</p>
            <p>Something</p>
            <p>Something</p>
        </div>
    </div>
</div>

<div class="btnMoreInfo">
    <a class="moreInfoLink">More Information</a>
</div>

И JS вроде: 

$(".inner .fullInfo").hide(0);

$('a.moreInfoLink').toggle(
    function () {
        $('.inner .fullInfo').slideDown(1000);
        $(this).text("Less info");
    },
    function () {
        $('.inner .fullInfo').slideUp(1000);
        $(this).text("More info");
    }
);

Таким образом, браузер анимирует только один элемент за раз - намного быстрее!

...