Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Немного изменить скрипт помогите - плавное открытие div'ов (https://javascript.ru/forum/dom-window/41658-nemnogo-izmenit-skript-pomogite-plavnoe-otkrytie-div%27ov.html)

Эдди 24.09.2013 01:41

Немного изменить скрипт помогите - плавное открытие div'ов
 
Уважаемые господа-товарищи (кому как нравится).

Есть скрипт, который открывает див.
Как изменить его, чтобы и закрывал еще, пожалуйста.
Плюс чтобы не по клику по диву открывался и закрывался (хотя я это и сам мог бы сделать), а отдельной ссылкой: Открыть/закрыть.

<html>
    <head>
        <title>Changer</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    </head>
    <body>
        <a href="">Развернуть</a>
        <div style="height: 30px; overflow:hidden; background-color:green;">
            а<br/>
            б<br/>
            в<br/>
            г<br/>
            д<br/>
            е<br/>
            ж<br/>
            з<br/>
            и<br/>
            к<br/>
            л<br/>
            м<br/>
            н<br/>
        </div>
        <script type="text/javascript">
            $('a').click(function () {
                // console.log($(this)[0].scrollHeight);
                $(this).animate({height: $(this)[0].scrollHeight}, 500);
            });
        </script>
    </body>
</html>

Эдди 24.09.2013 01:43

И еще прошу совета.
jQery все же лучше устанавливать у себя или на стороне брать?
Читал, что сторонний лучше, поскольку он в кеше будет, если южер уже подобные страницы посещал.

рони 24.09.2013 02:32

Эдди,
<!DOCTYPE HTML>
<html>
    <head>
        <title>Changer</title>
        <meta charset="utf-8">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    </head>
    <body>
        <a href="">Открыть/закрыть</a>
        <div style="height: 30px; overflow:hidden; background-color:green;">
            а<br/>
            б<br/>
            в<br/>
            г<br/>
            д<br/>
            е<br/>
            ж<br/>
            з<br/>
            и<br/>
            к<br/>
            л<br/>
            м<br/>
            н<br/>
        </div>
        <script type="text/javascript">
            $('a').click(function () {
                var next =  $(this).next(),
                height = next.height() <  next[0].scrollHeight ?  next[0].scrollHeight : '30px';
                next.stop().animate({'height': height}, 500);
                return false;
            });
        </script>
    </body>
</html>

Эдди 25.09.2013 22:49

Спасибо!

Странно. Копирую в файл, все ок.
Когда нажимаю здесь кнопку Посмотреть, ничего не работает.

Ну да ладно. :)

Эдди 26.09.2013 14:23

Прошу прощения. Руки кривые. Вопрос удален :)


Часовой пояс GMT +3, время: 10:47.