В jQuery, как я могу сделать анимацию слайдов в родителе фиксированной высоты? - PullRequest
Новая
       11

В jQuery, как я могу сделать анимацию слайдов в родителе фиксированной высоты?

2 голосов
/ 20 февраля 2009

У меня проблема с использованием анимации слайдов jQuery для элементов, которые находятся внутри контейнера с фиксированной высотой. У меня в приложении есть страница, на которой есть большой прокручиваемый div, внутри которого содержится много меньших div, каждый из которых представляет «сообщение» в почтовом ящике пользователя. Внутри каждого сообщения div находится кнопка «Удалить», которая при щелчке скрывает сообщение от большего кадра с помощью функции jQuery slideUp().

Это работало нормально, пока я не добавил свойство max-height в контейнер div. Теперь, когда нажата кнопка удаления, анимация отсутствует, и вместо этого div сразу исчезает из поля зрения. Если я удаляю свойство max-height из фрейма, анимация работает нормально, но поскольку фрейм может содержать любое количество сообщений, мне действительно нужно, чтобы он имел максимальную высоту и был прокручиваемым, когда он превышает эту высоту.

Я пытался заменить встроенную функцию slideUp() своей собственной функцией анимации и заменить max-height на фиксированную высоту, но ни одна из этих операций не работает.

Вот некоторые соответствующие образцы CSS и JS: 

//css  
div.messageList  
    {  
        border: solid 1px #B22222;  
        cursor: default;  
        color: #000000;  
        max-height: 800px;  
        overflow: auto;  
        width: 100%;  
    }  

.unreadMessage  
    {  
        margin: 2px;  
        border: solid 1px #B22222;  
        text-align: left;  
        background-color: #98FB98;  
    }  

//js  
function hideMessage(id) {  
        $('#' + id).slideUp(500);  
    }

Ответы [ 6 ]

2 голосов
/ 20 февраля 2009

Я предполагаю, что когда вы пишете фрейм, вы не имеете в виду реальный фрейм и имеете в виду ваш содержащий DIV (.messageList) 

        <style type="text/css">
            div.messageList  
            {  
                border: solid 1px #B22222;
                cursor: default;  
                color: #000;  
                max-height: 200px;
                overflow: auto;  
            }

            div.messageListContainer  
            {

            }

            .unreadMessage  
            {
                padding: 5px;
                margin: 2px;
                cursor: pointer;
                border: solid 1px #B22222;  
                text-align: left;  
                background-color: #98FB98;  
            }  
        </style>
        <script type="text/javascript">
            $(document).ready(function(){
                $(".unreadMessage").click(function(){ $(this).slideUp(500); });
            });
        </script>
        <div class="messageList">
            <div class="messageListContainer">
                <div class="unreadMessage">Lorem ipsum dolor sit amet, consectetur dipiscing elit. Nullam tempus.</div>
                <div class="unreadMessage">Lorem ipsum dolor sit amet, consectetur dipiscing elit. Nullam tempus.</div>
                <div class="unreadMessage">Lorem ipsum dolor sit amet, consectetur dipiscing elit. Nullam tempus.</div>
                <!-- Add more messages to test -->

            </div>
        </div>

Это сработало для меня в IE7 и FF3, но я не могу сказать, что max-height совместимо с разными браузерами, но я думаю, что у меня есть для вас то, к чему вы стремились.

1 голос
/ 25 июля 2009

Я попробовал первый ответ, и он работает для меня тоже, по крайней мере, на Firefox: вы можете увидеть его здесь .

Предложения: Проверьте свой доктайп. Попробуйте это: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

попробуйте связать ваши события с помощью функции "live ('click', callback)" вместо "bind ('click', callback)". Поскольку ваш контент загружается через ajax, это гарантирует, что события будут прикреплены к элементам, которых нет в DOM во время загрузки страницы.

0 голосов
/ 10 июля 2009

как john c Я также предполагаю, что ваши обработчики не связаны с .load () - ed dom. Попробуйте использовать livequery, чтобы обойти это. У меня есть пример: h ttp: //www.madnet.ch/2009/02/28/gallery-included/

0 голосов
/ 19 июня 2009

Это не решение, а скорее обходной путь, рассматривали ли вы возможность прокрутки всей страницы (а не только этого div)?

0 голосов
/ 23 февраля 2009

Я предполагаю, что дом перегружен, и вы просто видите анимацию в 1 кадр. Попробуйте .slideUp (20000), чтобы определить, существует ли реальная проблема.

0 голосов
/ 21 февраля 2009

Спасибо за предложение, Охотник. Я попробовал это, и я боюсь, что это не сработало для меня. У меня есть привязка событий, компоновка CSS и Div более или менее точно, как вы предложили, и анимация все еще нервная. Еще некоторые подробности, хотя я не уверен, насколько они хороши:

  • Содержимое на странице загружается асинхронно с помощью функции load () JQuery.
  • Это приложение ASP.NET MVC
  • Я использую IE7.

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

PS Я не уверен, что я должен был опубликовать это как ответ на свой собственный вопрос, я очень новичок в этом сайте, и он говорит мне, что у меня недостаточно репутации, чтобы оставить комментарий. *

Спасибо.

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

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

...