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

Aroused · July 24, 2011

Есть несколько кнопок. И несколько 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 уезжал, а новый выезжал. А то у меня по клику выезжает, а другой остаётся на месте...

DrStrangeLove · July 24, 2011

Не плохо было бы разместить на jsfiddle то, что у тебя уже есть.. (вместе с размёткой)

Наглядней было бы..

Edited July 24, 2011 by DrStrangeLove

Aroused · July 24, 2011

http://jsfiddle.net/zUgrm/

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

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

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

Edited July 24, 2011 by Aroused

Aroused · July 24, 2011

тут наверн нужно с переменными шаманить. Направте мысль..

Может как-то нужно задать переменную открытого div и закрытого?

Я что-то не понимаю..

Edited July 24, 2011 by Aroused

Vlad · July 24, 2011

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

Aroused · July 24, 2011

Да, замечательная идея, только при закрытии, появляются все дивы и происходит анимация 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 July 24, 2011 by Aroused

DrStrangeLove · July 24, 2011

Да, замечательная идея, только при закрытии, появляются все дивы и происходит анимация 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;
		});	
})
Но синтаксис я понимаю плохо, как поправить переменные что бы функция работала?

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

Aroused · July 24, 2011

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

DrStrangeLove · July 24, 2011

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

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

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

Int · July 24, 2011

а зачем было два раза function() писать? Нужно только содержимое без обёртки.

Aroused · July 24, 2011

Ну, мне 2 клик по активной ссылке не нужен, тут вопрос в том, чтобы по клику если какой-то див активен он уезжал, и выезжал новый.
Кажется, решил твою задачку..
Посмотри, это хоть подобие того, чего ты хотел??

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

if (!work)

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

if (work)

Edited July 24, 2011 by Aroused

DrStrangeLove · July 24, 2011

Ну, мне 2 клик по активной ссылке не нужен, тут вопрос в том, чтобы по клику если какой-то див активен он уезжал, и выезжал новый.
Кажется, решил твою задачку..
Посмотри, это хоть подобие того, чего ты хотел??
Я реально в шоке! Даже не могу в это поверить! Я с этим 4 дня парился! В чем фишка??? КАК?
if (!work)
Что значит "!"?
if (work)

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

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

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

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

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

Edited July 24, 2011 by DrStrangeLove

Aroused · July 24, 2011

У каждой ссылки - 2 состояния: 1) когда под ней ничего нет 2) когда под ней набор картинок.
булевы переменные переключают состояния, на основе проверки текущего состояния выполняется код.
Проблема приведённого мной решения в том, что оно работает только для двух конкретных ссылок..
Чтобы работало для n ссылок нужно придумать способ получения объекта, картинки которого выведены.. и потом делать ему hide().

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

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

Edited July 24, 2011 by Aroused

DrStrangeLove · July 24, 2011

У каждой ссылки - 2 состояния: 1) когда под ней ничего нет 2) когда под ней набор картинок.
булевы переменные переключают состояния, на основе проверки текущего состояния выполняется код.
Проблема приведённого мной решения в том, что оно работает только для двух конкретных ссылок..
Чтобы работало для n ссылок нужно придумать способ получения объекта, картинки которого выведены.. и потом делать ему hide().
Ну, я же могу помимо work и clients переменных увеличить количество.. А так-же увеличить количество if для каждого события.
Кароче, я это пойму когда начну реализовывать.. Все равно это меня реально продвинуло, огромное спасибо!!!

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

Aroused · July 24, 2011

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 July 24, 2011 by Aroused

DrStrangeLove · July 24, 2011

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

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

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

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

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

Aroused · July 24, 2011

замени 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;
    }

    });

});

Aroused · July 25, 2011

:facepalmxd:

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

Здесь анимация закрытия происходит одновременно у всех 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 July 25, 2011 by Aroused

DrStrangeLove · July 25, 2011

замени 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;
    }

    });

});

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

Aroused · July 25, 2011

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

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

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


           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 July 25, 2011 by Aroused

SelenIT · July 25, 2011

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

Aroused · July 25, 2011

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

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

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

Может

if(clients && work && services)

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

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

Aroused · July 25, 2011

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 July 25, 2011 by Aroused

Sign In

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

Question

Link to comment

Share on other sites

22 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information