CSS-позиционирование и безумие jQuery slideUp - PullRequest
1 голос
/ 04 февраля 2011

решено Посмотрите на комментарии ниже

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {

    $('#playlistToggle').click(function(event) {

        event.preventDefault();

        if($('#playlist').is(":hidden"))
        {
            $('#playlist').slideUp('medium');
        }

        else
        {
            $('#playlist').slideDown('medium');
        }

    });

});
</script>

<style type="text/css">
    #playlist_wrapper
    {
        bottom: 30px;
        height: 75px;
        overflow: hidden;
        position: fixed;
        width: 100%;
        background-color: yellow;
    }

        #playlist
        {
            background-color: #FF6633;
            border: 1px solid #666666;
            height: 75px;
            width: 920px;
            position: relative;
            bottom: 0;
            margin: 0 auto;
            visibility: hidden;
        }
</style>

</head>

<a href="#" id="playlistToggle">Toggle Playlist</a>

<div id="playlist_wrapper">
    <div id="playlist"></div>
</div>

Этот скрипт должен скользить вверх по плейлисту div, когда вы нажимаете кнопку.Тем не менее, ничего не происходит, когда вы нажмете.Если вы измените:

if ($ ('# playlist'). Is (": hidden"))

To:

если ($ ('# playlist'). is (": visible"))

И изменить свойство видимости css #playlist со значения "hidden" на "display", тогда div смещается вверхк вершине, и скользит вниз к низу, полная противоположность того, что я хочу, чтобы он делал.Что я здесь не так делаю?

РЕДАКТИРОВАТЬ: Чтобы уточнить: мне нужно, чтобы div плейлиста был скрыт с самого начала, а затем сдвигался вверх, когда я нажимал кнопку переключения.

Ответы [ 2 ]

2 голосов
/ 04 февраля 2011

Объект может быть скрыт только в том случае, если

* They have a CSS display value of none.
* They are form elements with type="hidden".
* Their width and height are explicitly set to 0.
* An ancestor element is hidden, so the element is not shown on the page.

Похоже, что #playlist не соответствует ни одному из этих критериев, поэтому селектор не совпадает с #playlist.Можете ли вы покончить с частью .is(':hidden') и заплатить без нее?

1 голос
/ 04 февраля 2011

.slideUp является синонимом .hide (хотя и с различными настройками получения эффекта)

аналогично

.slideDown является синонимом .show

все 4 являются просто предустановленными анимациями.

Если вы читаете документацию jQuery для slideUp и slideDown, они выглядят так:

slideUp:

Описание: Скройте соответствующие элементы скользящим движением.

slideDown:

Описание: Показать согласованные элементы с помощью скользящего движения.

Ergo: используйте slideDown, чтобы сделать материал видимым, а не slideUp

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