Правильный способ постепенного увеличения / уменьшения количества блоков в одном и том же пространстве. - PullRequest
Новая
       8

Правильный способ постепенного увеличения / уменьшения количества блоков в одном и том же пространстве.

1 голос
/ 11 февраля 2012

У меня есть коллекция кнопок, расположенных горизонтально по экрану, и под этими кнопками находится пространство, где я хочу, чтобы отображались различные виды контента.Например, если у меня есть кнопка с именем «биография», и я нажимаю на нее, я хотел бы, чтобы блок, содержащий текст биографии, постепенно исчезал. Если я затем нажимаю «картинки», блок биографии должен исчезнуть, а блок картинок долженfade in.

Текущее решение, которое у меня есть (и я знаю, что оно неверное), заключается в следующем.Под моими кнопками у меня есть таблица со строками, соответствующими различным блокам, которые я хочу отобразить, например: 

+---------------------+
|                     |
|      biography      |
|                     |
+---------------------+
|                     |
|      pictures       |
|         ...         |

Я установил их все в display: none в моей таблице стилей, а затем при нажатии кнопкиЯ исчезаю со всех строк и исчезаю в той, которую хочу отображать.Это не чисто, и, вероятно, это не лучший способ сделать что-то.

Вот мой код jQuery: 

var blocks = [
     "projects-fade",
     "blog-fade",
     "online-fade",
     "resume-fade"
]

$("#projects").click( function()
{
    // Fade out all blocks
    $.each(blocks, function()
    {
       $("#" + this).fadeOut(100);
    })
    // Fade in the correct block
    $("#projects-fade").fadeIn(300);
});
// the code above is repeated for each button

В коде #projects - кнопкас именем "projects", а blocks - это массив, содержащий идентификаторы всех текстовых контейнеров, которые появляются в пространстве под кнопками.Как видно из кода, при нажатии #projects все блоки исчезают (если один открыт и занимает место), а затем исчезают в соответствующем блоке (в данном случае #projects-fade).

Как мне добиться этого лучше?

1 Ответ

0 голосов
/ 11 февраля 2012

Если у вас уже нет всех ваших кнопок / ссылок внутри контейнера, поместите их в div и присвойте ему идентификатор menu. Затем сделайте то же самое со своими «блоками», но дайте этому контейнеру идентификатор blocks. Когда это будет сделано, измените код JQuery на это: 

$("#menu a").click(function()
{
    // Assuming the buttons have the same id's as the blocks, minus "-fade"
    var blockID = $(this).attr("id") + "-fade";

    // Fade out the active block
    $("#blocks .active-block").fadeOut(300, function()
    {
        $(this).removeClass("active-block");

        // Fade in the new block
        $("#" + blockID).addClass("active-block");
        $("#" + blockID).fadeIn(600);
    });        
});

Это похоже на ваш текущий код, но это почти все, что вы можете сделать, если не хотите использовать AJAX.

...