Форум

Giddeon · #1 (**permalink**) 17.10.2013, 19:20

Здравствуйте, форумчане!
пишу код, который должен сначала по выбору квадрата вытаскивать из низа экрана div, соответствующий этому квадрату, и сжимать поле выбора, а в последствии, при попытки выбрать другой вариант, дивы будут выезжать уже не снизу, а сбоку. Может немного криво объяснил, но уж как смог. Так вот первая часть работает чудно, а вот выезжание сбоку вообще не хочет работать, хотя вроде все там совсем просто

Вот хтмл

<!DOCTYPE html>
<html>
  <head>
    <title>Grace</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <link href="Grace.css" rel="stylesheet" type="text/css" />
	<script type='text/javascript' src='js/Grace.js'></script>
	<script type='text/javascript' src='js/Sliding.js'></script>
  </head>
  <body>
    <div id='header'>
	<h1> Grace </h1>
	<ul>
        <li>Production 
        </li>
        <li>Gallery
        </li>
        <li>About
        </li>
        <li>Contacts
        </li>
      </ul>
	</div>

	<div id='lent'>
	 <div id='first'>
	    <img src='' alt='' />
	 </div>
	 <div id='second'>
	    <img src='' alt='' />
	 </div>
	 <div id='third'>
	    <img src='' alt='' />
	 </div>
	 <div id='forth'>
	    <img src='' alt='' />
	 </div>
	</div>

    <div id='hidden1'></div>
    <div id='hidden2'></div>
    <div id='hidden3'></div>
    <div id='hidden4'></div>	
</body>
</html>

Вот CSS

*{
margin:0;
padding:0;
}

html,
body {
height: 100%;
overflow: hidden;
}

body {
background-color: #FDF5E6;
}

#header {
width: 100%;
height:16%;
background-color: #CC99CC;

}


h1 {
color: silver;
font-size: xx-large;
}

ul {
margin-left: 70%;
}

li {
display: inline-block;
margin-left: 2%;
}

#lent {
width: 70%;
height: 30%;
font-size: 0;
margin-left: 16%;
margin-top: 15%;
}

#first,
#second, 
#third, 
#forth {
height:100%;
width:25%;
display: inline-block;

}

#first {
background-color: blue;
}
#second {
background-color: yellow;
}
#third {
background-color: green;
}
#forth {
background-color:red;
}

#hidden1,
#hidden2,
#hidden3,
#hidden4
 {
width:100%;
height: 79%;
margin-top: 26.5%;
position: absolute;
diplay: none;
}

#hidden1 {
background-color: blue;
}

#hidden2 {
background-color: yellow;
}

#hidden3 {
background-color: green;
}

#hidden4 {
background-color: red;
}

Вот первый JQuery код
$(document).ready(function() {
$('#first').click(function() {
$('#hidden1').show();
setTimeout( function() {
$('#lent').animate({
  width: '100%',
  height: '5%', 
  marginTop: '0%',
  marginLeft: '0%'
  }, 2000);
  }, 750);
  $('#hidden1').animate({
  marginTop: '0%'
  }, 1000);
  $('#hidden1').addClass('selected');
  $('#lent').addClass('compressed');
 });
 
 $('#second').click(function() {
 if($('#lent').hasClass('compressed')) {}
 else {
 $('#hidden1').css('margin-left', '100%');
  $('#hidden1').css('margin-top', '0%');
 $('#hidden2').show();
setTimeout( function() {
$('#lent').animate({
  width: '100%',
  height: '5%', 
  marginTop: '0%',
  marginLeft: '0%'
  }, 2000);
  }, 750);
  $('#hidden2').animate({
  marginTop: '0%'
  }, 1000);
  $('#hidden2').addClass('selected');
  $('#lent').addClass('compressed');
  }
 });
 
 $('#third').click(function() {
 if($('#lent').hasClass('compressed')) {}
 else {
 $('#hidden3').show();
setTimeout( function() {
$('#lent').animate({
  width: '100%',
  height: '5%', 
  marginTop: '0%',
  marginLeft: '0%'
  }, 2000);
  }, 750);
  $('#hidden3').animate({
  marginTop: '0%'
  }, 1000);
  $('#hidden3').addClass('selected');
  $('#lent').addClass('compressed');
  }
 });
 
 $('#forth').click(function() {
  if($('#lent').hasClass('compressed')) {}
  else{
 $('#hidden4').show();
setTimeout( function() {
$('#lent').animate({
  width: '100%',
  height: '5%', 
  marginTop: '0%',
  marginLeft: '0%'
  }, 2000);
  }, 750);
  $('#hidden4').animate({
  marginTop: '0%'
  }, 1000);
  $('#hidden4').addClass('selected');
    $('#lent').addClass('compressed');
	}
 });
 
});

Вот второй

$(document).ready(function () {
		$('#first').click(function() {
		if($('#lent').hasClass('compressed')) {
			if($('#hidden1').hasClass('selected')) {}
			else {
				('#hidden1').show();
				$('.selected').animate({
				marginRight: '100%'
				}, 1000);
				$('#hidden1').animate({
				marginLeft: '0%'
				}, 1000);
				$('.selected').css('margin-left', '100%');
				}
			}
		});
});

рони · #2 (**permalink**) 17.10.2013, 19:39

Giddeon,
попробуйте собрать это всё вместе к какой нибудь песочнице ...

Сообщение от Giddeon

Вот второй

строка 6 -- пропущена $

Giddeon · #3 (**permalink**) 17.10.2013, 19:43

рони,
к какой-нибудь песочнице?
это как понять?

рони · #4 (**permalink**) 17.10.2013, 20:07

Giddeon,
http://learn.javascript.ru/play
или тут

[HTML run][/HTML]

run для исполнения кода
1 скрипт можно скомпоновать 4 блока почти однотипны

Giddeon · #5 (**permalink**) 17.10.2013, 20:28

рони
а конкретных причин, почему может не работать, не нашлось?)

рони · #6 (**permalink**) 17.10.2013, 21:33

Giddeon,
1 конкретную я вам написал, а неработает потому что клики кофликтуют из 1 и 2 скрипта

рони · #7 (**permalink**) 17.10.2013, 21:48

Giddeon, жать на жёлтый прямоугольник потом на синий, слабонервным в код не вглядываться )))

<!DOCTYPE html>
<html>
<head>
  <title>Grace</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
</script>
  <style type="text/css">
*{margin:0;padding:0}
    html,body{height:100%;overflow:hidden}
    body{background:#FDF5E6}
    #header{width:100%;height:16%;background:#C9C}
    h1{color:#C0C0C0;font-size:xx-large}
    ul{margin-left:70%}
    li{display:inline-block;margin-left:2%}
    #lent{width:70%;height:30%;font-size:0;margin-left:16%;margin-top:15%}
    #first,#second,#third,#forth{height:100%;width:25%;display:inline-block}
    #first,#hidden1{background:#00F}
    #second,#hidden2{background:#FF0}
    #third,#hidden3{background:#008000}
    #forth,#hidden4{background:#F00}
    #hidden1,#hidden2,#hidden3,#hidden4{width:100%;height:79%;margin-top:26.5%;position:absolute}
    .selected{
      border: #00CED1 5px dashed;
    }

  </style>
  <script>
$(document).ready(function() { var flag = false ;
  $('#first').click(function() {  if(flag) return;flag = true;

  $('#hidden1').show();
  setTimeout( function() {
  $('#lent').animate({
  width: '100%',
  height: '5%',
  marginTop: '0%',
  marginLeft: '0%'
  }, 2000);
  }, 750);
  $('#hidden1').animate({
  marginTop: '0%'
  }, 1000);
  $('#hidden1').addClass('selected');
  $('#lent').addClass('compressed');
  });

  $('#second').click(function() {  if(flag) return;flag = true;
  if($('#lent').hasClass('compressed')) {}
  else {
  $('#hidden1').css('margin-left', '100%');
  $('#hidden1').css('margin-top', '0%');
  $('#hidden2').show();
  setTimeout( function() {
  $('#lent').animate({
  width: '100%',
  height: '5%',
  marginTop: '0%',
  marginLeft: '0%'
  }, 2000);
  }, 750);
  $('#hidden2').animate({
  marginTop: '0%'
  }, 1000);
  $('#hidden2').addClass('selected');
  $('#lent').addClass('compressed');
  }
  });

  $('#third').click(function() { if(flag) return;flag = true;
  if($('#lent').hasClass('compressed')) {}
  else {
  $('#hidden3').show();
  setTimeout( function() {
  $('#lent').animate({
  width: '100%',
  height: '5%',
  marginTop: '0%',
  marginLeft: '0%'
  }, 2000);
  }, 750);
  $('#hidden3').animate({
  marginTop: '0%'
  }, 1000);
  $('#hidden3').addClass('selected');
  $('#lent').addClass('compressed');
  }
  });

  $('#forth').click(function() {  if(flag) return;flag = true;
  if($('#lent').hasClass('compressed')) {}
  else{
  $('#hidden4').show();
  setTimeout( function() {
  $('#lent').animate({
  width: '100%',
  height: '5%',
  marginTop: '0%',
  marginLeft: '0%'
  }, 2000);
  }, 750);
  $('#hidden4').animate({
  marginTop: '0%'
  }, 1000);
  $('#hidden4').addClass('selected');
    $('#lent').addClass('compressed');
    }
  });

  });
  </script>
  <script>
$(document).ready(function () {
        $('#first').click(function() {
        if($('#lent').hasClass('compressed')) {
            if($('#hidden1').hasClass('selected')) {}
            else {
                $('#hidden1').show();
                $('#hidden1').animate({
                marginLeft: '0%'
                }, 1000);
               $('.selected').animate({
                marginLeft: '-100%'
                }, 1000, function(){
                $('.selected').css('margin-left', '100%').removeClass('selected');
                $('#hidden1').addClass('selected');

                });
                }




            }
        });
  });
  </script>
</head>

<body>
  <div id='header'>
    <h1>Grace</h1>

    <ul>
      <li>Production</li>

      <li>Gallery</li>

      <li>About</li>

      <li>Contacts</li>
    </ul>
  </div>

  <div id='lent'>
    <div id='first'><img src='' alt=''></div>

    <div id='second'><img src='' alt=''></div>

    <div id='third'><img src='' alt=''></div>

    <div id='forth'><img src='' alt=''></div>
  </div>

  <div id='hidden1'></div>

  <div id='hidden2'></div>

  <div id='hidden3'></div>

  <div id='hidden4'></div>
</body>
</html>

Giddeon · #8 (**permalink**) 18.10.2013, 00:00

рони, спасибо большое, стало хоть как-то работать)
а что ты поменял, кроме добавления системы флагов?)
и еще кое-что, по идее во втором скрипте новый див, выезжающий сбоку должен "выталкивать" текущий за экран, а текущий просто исчезает, хотя нигде в коде не прописано, чтобы нечто подобное происходило, не подскажешь, в чем может быть дело?

рони · #9 (**permalink**) 18.10.2013, 00:09

Giddeon,

Сообщение от Giddeon

выезжающий сбоку должен "выталкивать"

120 строка ксс сработает раньше чем анимации из 114 и 117 -- двигать некого -- такие ксс ставят в колбек анимации

Форум

Справочник

Discord чат

Курсы javascript