jQuery slideDown против jQuery UI .show («слайд») - PullRequest
Новая
       1

jQuery slideDown против jQuery UI .show («слайд»)

8 голосов
/ 06 января 2010

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

Если я использую $('#drawer').slideDown(), контент выталкивается с дороги, но контент на самом деле не «скользит вниз». Это скорее вайп, чтобы раскрыть содержание.

Если я использую $('#drawer').show('slide',{direction:'up'}), содержимое корректно сдвигается вниз, но все содержимое под элементом выскакивает, прежде чем возникает эффект.

Есть ли способ объединить лучшее из того и другого, чтобы воспроизвести эффект, который я ищу: выдвижной ящик, выдвигающий содержимое под ним?

Я исследовал функцию .animate() пользовательского интерфейса jQuery, но документация бесполезна. Мои грубые попытки использовать его были провалены.

И, если кто-то спросит, извините, я не могу показать пример, но мы бы хотели, чтобы он работал как плагин jQuery Drawer:

http://lib.metatype.jp/jquery_drawer/sample.html

Но этот плагин не делает то, что нам нужно, иначе я бы просто использовал это (не используя маркированный список или контент AJAX). Эффект там, что мы хотим, однако.

ОБНОВЛЕНИЕ: я также пробовал эту часть кода через плагин jQuery Drawer, но он вообще не анимируется: 

$('#drawer').css({ marginTop: $('#drawer').height() * -1 }).animate({ marginTop: 0 });

Для пояснения, это также вызывается в функции OpenDrawer(), которая вызывается так: 

$(document).ready(function() {
    OpenDrawer();
});

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

Ответы [ 5 ]

8 голосов
/ 18 мая 2010

Я полагаю, вы ищете эффект, похожий на «слепой»: 

$('#drawer').show('blind');

Странно, что $ .fn.slideDown () и $ .fn.show ('slide') работают не так, как «слепой». 'slide' создает заполнитель размером с ваш объект и затем скользит в рамку обзора, в то время как вслепую регулирует высоту или ширину вашего элемента до тех пор, пока он не увеличится до правильного размера (в то время как переполнение установлено на скрытое). Так что на самом деле имена эффектов правильные, но есть некоторая путаница из-за устаревшего имени $ .fn.slideDown ().

7 голосов
/ 23 ноября 2010

Это поздний пост, но я столкнулся с этой проблемой и сумел сделать что-то, что работает.

Я не гуру jQuery или Javascript, поэтому не пренебрегайте этим быстрым решением.

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

Я просто быстро проверил это на FF 3.6

Вы можете попробовать пример на игровой площадке Google Code. http://code.google.com/apis/ajax/playground/#jqueryui

Нажмите на редактировать html, вставьте код и нажмите Run code. Пример должен работать

Надеюсь, это поможет 

<html>
<head>
<!--<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.6.min.js"></script>-->
<script src="http://www.google.com/jsapi?key=AIzaSyA5m1Nc8ws2BbmPRwKu5gFradvD_hgq6G0" type="text/javascript"></script>
<script type="text/javascript">
    google.load("jquery", "1");
    google.load("jqueryui", "1");
    </script>
</head>
<body>
<script>
jQuery(function ()
{
    // We bind the <a>I'm the push link!</a> click event to the toggle function
    $("#topPart a").click(function() 
                                      {
                                          toggleSlide(this);
                                      });                
});
function toggleSlide(element)
{
    var drawer = jQuery("#drawer");
    var content = jQuery("#drawerContent");
    if (jQuery(content).is(":hidden"))
    {
        // The order here is important, we must slide juste before starting blinding
        setTimeout(function()
                    {
                        jQuery(content).effect("slide", { direction: "up", mode : "show"}, 500);
                    },1);
        setTimeout(function()
                    {
                        jQuery(drawer).effect("blind", { direction: "vertical", mode : "show" }, 490);

                    },1);
    }
    else
    {
        setTimeout(function()
                    {
                        jQuery(drawer).effect("blind", { direction: "vertical", mode : "hide" }, 500);
                        // The previous blind effect hide the drawer
                        // However we want it to be shown again, if not the next "drawer opening effect" won't play
                        jQuery(drawer).effect("blind", { direction: "vertical", mode : "show" }, 1);
                    },1);
        setTimeout(function()
                    {
                        jQuery(content).effect("slide", { direction: "up", mode : "hide" }, 460);
                    },1);
    }
}

</script>

    <div id="topPart">
        <a href="javascript:void(0)">I'm the push link!</a>
    </div>
    <div id="drawer">
        <div id="drawerContent" style="display:none;border:1px solid transparent;width:600px;">
        <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, ....
        </p>
        <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
        </div>
    </div>
    <div id="bottomPart">
    I want to be pushed nicely
    </div>
</body>
</html>
1 голос
/ 07 января 2010

Javascript, который вы имеете в своем обновлении вопроса, работает, но он должен работать с элементом, содержащим ваш контент, а не с самим контентом.

Чтобы увидеть это в действии, окружите элемент #drawer другим div: 

<div id='container'>
    <div id='drawer'>...</div>
<div>

И анимировать контейнер: 

$('#container')
    .css({ marginTop: $('#container').height() * -1 })
    .animate({ marginTop: 0 });
0 голосов
/ 17 ноября 2011

Я также искал достойную реализацию этого (на первый взгляд, простого) эффекта, и это лучший, который я нашел: http://eric.muyser.com/work/jquery/drawer/example/

Смотрите здесь для получения дополнительной информации / код / ​​и т.д: http://eric.muyser.com/blog/post/jquery-plugin-jdrawer

Тем не менее, это все еще кажется излишним, и его нужно свести к плагину анимации, которая может быть вызвана / применена через .show (), что именно то, что вы ожидаете, чтобы уже присутствовать в jQuery / UI как во-первых, стандарт ... но, к сожалению, нет ...

0 голосов
/ 06 января 2010

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

$('#drawer').slideDown('slow');

Изменяя скорость, вы можете получить разные скорости скольжения, чтобы они выглядели так, как вы этого хотите. Теперь, даже если у вас есть элемент выдвижного ящика, вам нужен изначально скрытый контейнер, который будет скользить. Допустим, у вас есть кнопка с идентификатором «ящик» и контейнер с идентификатором «myDrawerContent». Вы бы сделали следующее, 

$('#drawer').click(function() {
    $('#myDrawerContent').slideDown('slow');
}

$('#drw_loader').animate({ 
    height: $('#drw_ajax').height() }, 
    function () { $('#drw_loader').fadeOut(function () { $('#drw_ajax').fadeIn(); });
});

Надеюсь, это поможет.

Метрополис

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...