Helpers - компьютеры, интернет, программирование

jQuery включить горизонтальную анимацию

Я новичок здесь, поэтому я надеюсь, что я делаю это правильно.

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

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

Может ли кто-нибудь из вас предложить лучшее решение для этого?

   <script type="text/javascript"> 
    var visible=0;
    function getClickedId(clicked_id) {
        var selectedId = clicked_id;
        $(document).ready(function () {

            if (visible ==0) {
                  $('[name='+selectedId+']').animate({width: 300}, "slow");
                  $('#Wrapper'+selectedId).animate({width: 325}, "slow");
                   visible=1;
            } else {
                  $('[name='+selectedId+']').animate({width: 0}, "slow");
                  $('#Wrapper'+selectedId).animate({width: 25}, "slow");
                  visible=0;
            }
        });
    }
    </script>

(Извините, если мой код вставки неверен)

jquery jquery-animate
23.06.2012

  • У ребят из bootstrap есть отличный способ сделать это с помощью атрибутов data-toggle/data-target. Это, вероятно, немного продвинуто, но стоит посмотреть. демонстрация, источник. 23.06.2012
  • Спасибо, буду разбираться :) 23.06.2012

Ответы:


1

пытаться:

<script type="text/javascript"> 
var visible=0;
function getClickedId(clicked_id) {
    var selectedId = clicked_id;
    if (visible == 0) {
          $('[name='+selectedId+']').animate({width: 300}, "slow");
          $('#Wrapper'+selectedId).animate({width: 325}, "slow");
          visible=1;
    } else {
          $('[name='+selectedId+']').animate({width: 0}, "slow");
          $('#Wrapper'+selectedId).animate({width: 25}, "slow");
          visible=0;
    }
 }
</script>
23.06.2012
  • Это частично работает, но тогда я не могу закрыть открытые элементы, поскольку решение, которое вы предоставили для функции открытия, будет работать, даже если значение visible равно 1. 23.06.2012
  • @ user1477205 я не понял, что ты имеешь в виду 23.06.2012
  • Я вижу, вы отредактировали код после моего ответа. Но удалить готовый документ не получилось. 23.06.2012

    • 2 
    $(document).ready(function () {
    var visible=true;
    function getClickedId(clicked_id) {   
        $('[name="'+clicked_id+'"]').animate({width: visible ? 300 : 0}, "slow");
        $('#Wrapper'+clicked_id).animate({width: visible ? 325 : 25}, "slow");
        visible=!visible;
    }
});

    FIDDLE 

    23.06.2012
    Новые материалы
    Интуитивное понимание тензоров в машинном обучении
    Тензор является важной концепцией во многих научных областях, таких как математика, физика, обработка сигналов и компьютерное зрение, и это лишь некоторые из них. В математике тензор — это..
    Использование машинного обучения для диагностики болезни Альцгеймера, часть 4
    Маркеры семантической согласованности для ранней диагностики болезни Альцгеймера (arXiv) Автор: Давиде Колла , Маттео Дельсанто , Марко Агосто , Бенедетто Витиелло , Даниэле Паоло Радичони..
    Почему объяснимость так важна прямо сейчас?
    По мере того, как системы искусственного интеллекта и инструменты на основе машинного обучения распространяются в нашей повседневной жизни, как практики, так и критики все чаще заявляют о..
    Анимированный математический анализ
    Использование Manim для создания математических анимированных визуализаций Визуализация данных помогает понять скрытые закономерности в данных, которые невозможно визуализировать..
    Создание простого слайдера изображений с помощью JavaScript
    Узнайте, как создать базовый слайдер изображений с помощью HTML, CSS и JavaScript. Введение В этом уроке мы создадим удобный слайдер изображений, используя JavaScript, HTML и CSS. Ползунок..
    Создание базы данных с помощью супергероя «Python»
    В этом посте мы узнаем, как создать «базу данных SQLite с помощью модуля python sqlite3, создав простую функцию входа и регистрации. Готовы ли вы к этому путешествию? Если да , давайте приступим..
    ИИ для чайников: руководство для начинающих по пониманию будущего технологий
    Вы чувствуете, что остались позади в мире ИИ? Не волнуйтесь, вы не одиноки! Со всей этой шумихой вокруг искусственного интеллекта может быть трудно понять, с чего начать. Но не позволяйте сленгу..