Jump to content
  • 0

Подскажите алгоритм.

Aroused

Asked by Aroused,

 Share

Question

Aroused Explorer

Aroused

Posted
Posted

Есть несколько кнопок. И несколько div'ов.

По клику на кнопку выезжает div.

//выезжает:


        	<li><a href="#" id="clients" class="main_btn">CLIENTS</a></li>

$(document).ready(function(){
	$(".clients_wrapper").hide();
		$("#clients").click(
		function(){
			$(".clients_wrapper").show("slide", { direction: "right" }, 1100);
			return false;
		});
})

//уезжает:


		$("#clients").click(
		function(){
			$(".clients_wrapper").hide("slide", { direction: "left" }, 1100);
			return false;
		});

Подскажите алгоритм, и как нужно сделать, чтобы по клику открытый div уезжал, а новый выезжал. А то у меня по клику выезжает, а другой остаётся на месте...

Link to comment
Share on other sites

22 answers to this question

Recommended Posts

  • 0
Aroused Explorer

Aroused

Posted
  • Author
Posted (edited)

http://jsfiddle.net/zUgrm/

Он еще сырой, но суть понятна. эт портфолио.

Главная проблема это -по клику должен выезжать div, по другому клику он должен уехать и появиться новый.

к дивам подключен плагин(его не видно сейчас). Там пока только 2 дива. work и clients.

Edited by Aroused
Link to comment
Share on other sites
  • 0
Aroused Explorer

Aroused

Posted
  • Author
Posted (edited)

Да, замечательная идея, только при закрытии, появляются все дивы и происходит анимация hide для всех, а не для конкретно открытого дива. Я подумал можно сделать так:


$(document).ready(function(){
	$("#clients_wrp").hide();
	$("#work_wrp").hide();
	var clientsv = 0;         //здесь
	var workv = 0;            //здесь

		$("#clients").click(
		function(){
			$("#clients_wrp").show("slide", { direction: "right" }, 1100);
			var clientsv = 1;           //здесь
			return false;
		}, function(){
			$("#work_wrp").hide("slide", { direction: "left" }, 1100);
			if (workv) value = 1;       //здесь
			return false;
		});

		$("#work").click(
		function(){
			$("#work_wrp").show("slide", { direction: "right" }, 1100);
			var workv = 1;             //здесь
			return false;
		}, function(){
			$("#clients_wrp").hide("slide", { direction: "left" }, 1100);
			if (clientsv) value = 1;   // и здесь
			return false;
		});	
})

Но синтаксис я понимаю плохо, как поправить переменные что бы функция работала? :mellow:

Edited by Aroused
Link to comment
Share on other sites
  • 0
DrStrangeLove Explorer

DrStrangeLove

Posted
Posted
  On 7/24/2011 at 2:44 PM, Aroused said:

Да, замечательная идея, только при закрытии, появляются все дивы и происходит анимация hide для всех, а не для конкретно открытого дива. Я подумал можно сделать так:


$(document).ready(function(){
	$("#clients_wrp").hide();
	$("#work_wrp").hide();
	var clientsv = 0;         //здесь
	var workv = 0;            //здесь

		$("#clients").click(
		function(){
			$("#clients_wrp").show("slide", { direction: "right" }, 1100);
			var clientsv = 1;           //здесь
			return false;
		}, function(){
			$("#work_wrp").hide("slide", { direction: "left" }, 1100);
			if (workv) value = 1;       //здесь
			return false;
		});

		$("#work").click(
		function(){
			$("#work_wrp").show("slide", { direction: "right" }, 1100);
			var workv = 1;             //здесь
			return false;
		}, function(){
			$("#clients_wrp").hide("slide", { direction: "left" }, 1100);
			if (clientsv) value = 1;   // и здесь
			return false;
		});	
})

Но синтаксис я понимаю плохо, как поправить переменные что бы функция работала? :mellow:

click() не поддерживает 2 обработчика, тебе нужен toggle

Link to comment
Share on other sites
  • 0
DrStrangeLove Explorer

DrStrangeLove

Posted
Posted
  On 7/24/2011 at 5:41 PM, Aroused said:

Ну, мне 2 клик по активной ссылке не нужен, тут вопрос в том, чтобы по клику если какой-то див активен он уезжал, и выезжал новый. :dash:

Кажется, решил твою задачку..

Посмотри, это хоть подобие того, чего ты хотел??

Link to comment
Share on other sites
  • 0
Aroused Explorer

Aroused

Posted
  • Author
Posted (edited)
  On 7/24/2011 at 7:21 PM, DrStrangeLove said:
  On 7/24/2011 at 5:41 PM, Aroused said:

Ну, мне 2 клик по активной ссылке не нужен, тут вопрос в том, чтобы по клику если какой-то див активен он уезжал, и выезжал новый. :dash:

Кажется, решил твою задачку..

Посмотри, это хоть подобие того, чего ты хотел??

:yahoo: Я реально в шоке! Даже не могу в это поверить! Я с этим 4 дня парился! В чем фишка??? КАК? :yahoo:

if (!work)

Что значит "!"? 

if (work)

Edited by Aroused
Link to comment
Share on other sites
  • 0
DrStrangeLove Explorer

DrStrangeLove

Posted
Posted (edited)
  On 7/24/2011 at 7:59 PM, Aroused said:
  On 7/24/2011 at 7:21 PM, DrStrangeLove said:
  On 7/24/2011 at 5:41 PM, Aroused said:

Ну, мне 2 клик по активной ссылке не нужен, тут вопрос в том, чтобы по клику если какой-то див активен он уезжал, и выезжал новый. :dash:

Кажется, решил твою задачку..

Посмотри, это хоть подобие того, чего ты хотел??

:yahoo: Я реально в шоке! Даже не могу в это поверить! Я с этим 4 дня парился! В чем фишка??? КАК? :yahoo:

if (!work)

Что значит "!"? 

if (work)

У каждой ссылки - 2 состояния: 1) когда под ней ничего нет 2) когда под ней набор картинок.

булевы переменные переключают состояния, на основе проверки текущего состояния выполняется код.

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

Чтобы работало для n ссылок нужно придумать способ получения объекта, картинки которого выведены.. и потом делать ему hide().

P.S.: ! - логический оператор отрицания. Блок, что после предиката (!work) выполнится только если предикат true. Но нам в данном случае нужно выполнить блок кода, если work=false, поэтому чтобы предикат был true надо подставить ! . В данном случае имеется ввиду истинность того, что work=false.

Edited by DrStrangeLove
Link to comment
Share on other sites
  • 0
Aroused Explorer

Aroused

Posted
  • Author
Posted (edited)
  Quote

У каждой ссылки - 2 состояния: 1) когда под ней ничего нет 2) когда под ней набор картинок.

булевы переменные переключают состояния, на основе проверки текущего состояния выполняется код.

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

Чтобы работало для n ссылок нужно придумать способ получения объекта, картинки которого выведены.. и потом делать ему hide().

Ну, я же могу помимо work и clients переменных увеличить количество.. А так-же увеличить количество if для каждого события. :blink:

Кароче, я это пойму когда начну реализовывать.. Все равно это меня реально продвинуло, огромное спасибо!!! :D

Edited by Aroused
  • Like 1
Link to comment
Share on other sites
  • 0
DrStrangeLove Explorer

DrStrangeLove

Posted
Posted
  On 7/24/2011 at 8:27 PM, Aroused said:
  Quote

У каждой ссылки - 2 состояния: 1) когда под ней ничего нет 2) когда под ней набор картинок.

булевы переменные переключают состояния, на основе проверки текущего состояния выполняется код.

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

Чтобы работало для n ссылок нужно придумать способ получения объекта, картинки которого выведены.. и потом делать ему hide().

Ну, я же могу помимо work и clients переменных увеличить количество.. А так-же увеличить количество if для каждого события. :blink:

Кароче, я это пойму когда начну реализовывать.. Все равно это меня реально продвинуло, огромное спасибо!!! :D

Пожалуйста, рад, что помогло.. Удачи!! :)

Link to comment
Share on other sites
  • 0
Aroused Explorer

Aroused

Posted
  • Author
Posted (edited)

DrStrangeLove

Я имел ввиду вот :


var work = false;
var clients = false;
var services = false;   

    $(document).ready(function(){
    $(".clients_wrapper").hide();
    $(".work_wrapper").hide();
	$(".services_wrapper").hide();

        $("#clients").click(

        function()
		{
        if (work = false) 
		{	   
    $(".clients_wrapper").show("slide", { direction: "right" }, 1100);
         clients = true;   
    return false;
        }

        if (work = true){
    $(".work_wrapper").hide("slide", {
    direction: "left" }, 1100);

    $(".clients_wrapper").show("slide", { direction: "right" }, 1100);
         clients = true;   
    return false;
		}

		if (services = false)
		{
	 $(".clients_wrapper").show("slide", { direction: "right" }, 1100);
         clients = true;   
    return false;
		}
        if (services = true){
    $(".services_wrapper").hide("slide", {
    direction: "left" }, 1100);

    $(".clients_wrapper").show("slide", { direction: "right" }, 1100);
         clients = true;   
    return false;
		}

    });

//////и т.д.

Но действительно ничего не работает, хотя по моему мнению всё логично...

Edited by Aroused
Link to comment
Share on other sites
  • 0
DrStrangeLove Explorer

DrStrangeLove

Posted
Posted

Грубые ошибки синтаксиса так и лезут в глаза..

замени if (work = false) на if (!work)

также замени if (work = true) на if (work). (тоже самое касается других переменных)

Когда я писал work = false , я всего лишь объяснял тебе логику..

Это не значит, что так синтаксически правильно..

Link to comment
Share on other sites
  • 0
Aroused Explorer

Aroused

Posted
  • Author
Posted
  On 7/24/2011 at 10:36 PM, DrStrangeLove said:

замени if (work = false) на if (!work)

также замени if (work = true) на if (work). (тоже самое касается других переменных)

Я понял что в 1 событии можно использовать только 2 булевые переменные.


var work = false;
var clients = false;
var services = false;     

    $(document).ready(function(){
    $(".clients_wrapper").hide();
    $(".work_wrapper").hide();
	$(".services_wrapper").hide();

        $("#clients").click(
        function(){
        if (!work) {   
    $(".clients_wrapper").show("slide", { direction: "right" }, 1100);
         clients = true;   
    return false;
        }
        if (work){
    $(".work_wrapper").hide("slide", {
    direction: "left" }, 1100);


     $(".clients_wrapper").show("slide", { direction: "right" }, 1100);
         clients = true;   
    return false;
    }
	   if (!services) {  

    $(".clients_wrapper").show("slide", { direction: "right" }, 1100);
    	clients = true;        
    return false;
        }
       if (services) {
    $(".services_wrapper").hide("slide", {
    direction: "left" }, 1100);


     $(".clients_wrapper").show("slide", { direction: "right" }, 1100);
         clients = true;   
    return false;
		}

    });

        $("#work").click(
        function(){
         if (!clients) {  

    $(".work_wrapper").show("slide", { direction: "right" }, 1100);
    work = true;        
    return false;
        }
       if (clients) {
    $(".clients_wrapper").hide("slide", {
    direction: "left" }, 1100);


     $(".work_wrapper").show("slide", { direction: "right" }, 1100);
         work = true;   
    return false;


    }
    });

	         $("#services").click(
        function(){
         if (!clients) {  

    $(".services_wrapper").show("slide", { direction: "right" }, 1100);
    services = true;        
    return false;
        }
       if (clients) {
    $(".clients_wrapper").hide("slide", {
    direction: "left" }, 1100);

     $(".services_wrapper").show("slide", { direction: "right" }, 1100);
         services = true;   
    return false;
    }

    });

});

Link to comment
Share on other sites
  • 0
Aroused Explorer

Aroused

Posted
  • Author
Posted (edited)

:facepalmxd:

  On 7/24/2011 at 1:15 PM, Vlad said:

Если дивов немного, тогда можно при нажатии на любой из них скрывать вначале все. А потом уже показывать нужный.

Здесь анимация закрытия происходит одновременно у всех div даже не активных

//Js

    $(document).ready(function(){
    $("#contentclients").hide();
    $("#contentwork").hide();
	$("#contentservices").hide();

   $("#menu a").click(function() {

      //reset
      $(".content").hide("slide", {direction: "left" }, 1100);;
      $("#menu .active").removeClass("active");

      //act
      $(this).addClass("active")
      var id = $(this).closest("li").attr("id");
      $("#content" + id).show("slide", { direction: "right" }, 1100);
   });

});

//Html


<div id="contentclients" class="content">
<div id="contentwork" class="content">
<div id="contentservices" class="content">

Edited by Aroused
Link to comment
Share on other sites
  • 0
DrStrangeLove Explorer

DrStrangeLove

Posted
Posted
  On 7/24/2011 at 11:16 PM, Aroused said:
  On 7/24/2011 at 10:36 PM, DrStrangeLove said:

замени if (work = false) на if (!work)

также замени if (work = true) на if (work). (тоже самое касается других переменных)

Я понял что в 1 событии можно использовать только 2 булевые переменные.


var work = false;
var clients = false;
var services = false;     

    $(document).ready(function(){
    $(".clients_wrapper").hide();
    $(".work_wrapper").hide();
	$(".services_wrapper").hide();

        $("#clients").click(
        function(){
        if (!work) {   
    $(".clients_wrapper").show("slide", { direction: "right" }, 1100);
         clients = true;   
    return false;
        }
        if (work){
    $(".work_wrapper").hide("slide", {
    direction: "left" }, 1100);


     $(".clients_wrapper").show("slide", { direction: "right" }, 1100);
         clients = true;   
    return false;
    }
	   if (!services) {  

    $(".clients_wrapper").show("slide", { direction: "right" }, 1100);
    	clients = true;        
    return false;
        }
       if (services) {
    $(".services_wrapper").hide("slide", {
    direction: "left" }, 1100);


     $(".clients_wrapper").show("slide", { direction: "right" }, 1100);
         clients = true;   
    return false;
		}

    });

        $("#work").click(
        function(){
         if (!clients) {  

    $(".work_wrapper").show("slide", { direction: "right" }, 1100);
    work = true;        
    return false;
        }
       if (clients) {
    $(".clients_wrapper").hide("slide", {
    direction: "left" }, 1100);


     $(".work_wrapper").show("slide", { direction: "right" }, 1100);
         work = true;   
    return false;


    }
    });

	         $("#services").click(
        function(){
         if (!clients) {  

    $(".services_wrapper").show("slide", { direction: "right" }, 1100);
    services = true;        
    return false;
        }
       if (clients) {
    $(".clients_wrapper").hide("slide", {
    direction: "left" }, 1100);

     $(".services_wrapper").show("slide", { direction: "right" }, 1100);
         services = true;   
    return false;
    }

    });

});

Ну, так всё нормально работает, или как??

Link to comment
Share on other sites
  • 0
Aroused Explorer

Aroused

Posted
  • Author
Posted (edited)
  Quote

Ну, так всё нормально работает, или как??

Нет, не работает.

Не работает в клиентс конкретно то, что дописал-


           if (!services) {  

    $(".clients_wrapper").show("slide", { direction: "right" }, 1100);
        clients = true;        
    return false;
        }
       if (services) {
    $(".services_wrapper").hide("slide", {
    direction: "left" }, 1100);


     $(".clients_wrapper").show("slide", { direction: "right" }, 1100);
         clients = true;   
    return false;
                }

Edited by Aroused
Link to comment
Share on other sites
  • 0
Aroused Explorer

Aroused

Posted
  • Author
Posted
  On 7/25/2011 at 1:40 PM, SelenIT said:

Запомнить выехавший див в переменной, по клику на кнопку скрыть див из переменной, дать выехать новому и запомнить в ней уже его?

Круто, круто.

Только как это делается?

Может 

if(clients && work && services)

&& Логическое И. Возвращает последний операнд, если все операнды верны. Если хоть один из операндов неверен, то возвратит первый неверный операнд.

Может можно как-то по не верному работать?

Link to comment
Share on other sites
  • 0
Aroused Explorer

Aroused

Posted
  • Author
Posted (edited)

SelenIT навёл на мысль =)

КУЛЬМИНАЦИЯ


<script type="text/javascript"> 
var current = null;
    $(document).ready(function(){
	$(".clients_wrapper").hide();
	$(".work_wrapper").hide();
	$(".services_wrapper").hide();

		$("#clients").click(
		function(){
			if (current == null)
			{
				$("#clients_wrp").show("slide", { direction: "right" }, 1100);
         		current = $("#clients_wrp");   
    			return false;
			};

			if (current != null)
			{
				$(current).hide("slide", { direction: "left" }, 1100);   

				$("#clients_wrp").show("slide", { direction: "right" }, 1100);
         		current = $("#clients_wrp");   
    			return false;
			}
			});

		$("#work").click(
		function(){
			if (current == null)
			{
				$("#work_wrp").show("slide", { direction: "right" }, 1100);
         		current = $("#work_wrp");   
    			return false;
			};

			if (current != null)
			{
				$(current).hide("slide", { direction: "left" }, 1100);   

				$("#work_wrp").show("slide", { direction: "right" }, 1100);
         		current = $("#work_wrp");   
    			return false;
			}
			});

		$("#services").click(
		function(){
			if (current == null)
			{
				$("#services_wrp").show("slide", { direction: "right" }, 1100);
         		current = $("#services_wrp");   
    			return false;
			};

			if (current != null)
			{
				$(current).hide("slide", { direction: "left" }, 1100);   

				$("#services_wrp").show("slide", { direction: "right" }, 1100);
         		current = $("#services_wrp");   
    			return false;
			}
			});
	});
</script>

Edited by Aroused
  • Like 1
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept