анимация ширины div с использованием процентной доли ширины JQuery

У меня есть следующий рабочий код, и я хочу его изменить, так как он использует проценты для ширины с 400px. Как я мог это сделать? В частности, я хочу, чтобы он шел от внутренней ширины от 25% до 0 и обратно до 25%, как только кнопка снова нажата. Кроме того, используя тот же show_hide_button, как я могу изменить ширину дополнительного div так, чтобы он переключался между 75% и 100%. 75% intial, 100% при нажатии кнопки и возврат к 75% при повторном нажатии кнопки.анимация ширины div с использованием процентной доли ширины JQuery

Вот что у меня есть:

$(document).ready(function(){ 
    $('#show_hide_button').click(function() { 
     var toggleWidth = $("#some_box").width() == 400 ? "0" : "400px"; 
     $('#some_box').animate({ width: toggleWidth }); 
    }); 
});

Я очень признателен за любую помощь!

источник

2013-06-21 irm

Im уверено, что вы cdan значения одушевленного pourcentage:. '$ ("# Some_box") ширина() == 400? «0%»: «25%»; «Изменить: если нужно изменить. –

@Karl Вы правы, что могли бы работать, но после нажатия на botton дважды ширина не будет соответствовать 400 снова, поэтому я перестану работать и, похоже, не сработает, если я заменил 400 на процент. – irm

Здесь вы идете:

Update: Это должно работать

CSS:

#some_box { 
    background: #fc0; 
    width: 25%; 
    height: 100px; 
} 
#some_other_box { 
    background: #0cf; 
    width: 75%; 
    height: 100px; 
}

JS:

var collapsed = false; 
$('#show_hide_button').click(function() { 
    if(!collapsed){ 
     $('#some_box').animate({width: '0%'}); 
     $('#some_other_box').animate({width: '100%'}); 
    } else { 
     $('#some_box').animate({width: '25%'}); 
     $('#some_other_box').animate({width: '75%'}); 
    } 
    collapsed = !collapsed; 
});

http://jsfiddle.net/moderndegree/xLHb8/

оригинальный ответ:

$(document).ready(function(){ 
    $('#show_hide_button').click(function() { 
     $('#some_box').animate({ width: 'toggle' }); 
    }); 
});

http://jsfiddle.net/moderndegree/xLHb8/1/

источник

2013-06-21 22:22:14

Большое спасибо. Еще кое-что. Как бы я мог анимировать дополнительный div с той же кнопкой переключения между 75% и 100%? – irm

Я только что отредактировал свой ответ для работы с более свежими версиями jQuery. –

-1

Я довольно хорошо знаю здесь, но я отдам его.

Ваш ответ заключается в изменении масштабного коэффициента.

Простой учебник для обычного бара:

Прежде всего, это работает, беря процент вы вычисленный позволяет сказать «50%», то вы берете ширину объекта и убедитесь, что «100» ширина заполнена (если вы не хотите сделать ее более сложной) По мере того как вы получаете больше процентов, повышайте ее на один (если только вы не усложнили).

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

источник

2013-06-21 21:58:06 Darry

Как discuted в комментарии, вы можете анимировать ширину в процентах. Теперь, чтобы узнать, равна ли ширина 0% или 25%, я предлагаю вам работать с классом. Просто так:

$(document).ready(function(){ 
    $('#show_hide_button').click(function() { 
     var toggleWidth = $("#some_box").hasClass('expanded') ? "0%" : "25%"; 
     $('#some_box').stop().animate({ width: toggleWidth }, function(){ 
      $(this).toggleClass('expanded'); 
     }); 
    }); 
});

Здесь рабочей скрипка: http://jsfiddle.net/umCyy/

источник

2013-06-21 22:42:44

анимация ширины div с использованием процентной доли ширины JQuery

ответ

Смежные вопросы