Latający element podczas animacji jQuery

pytanie zadane 27 września 2016 w JavaScript przez DariuszH Gaduła (3,100 p.)



Witam. Podczas Klikania w kółko linia prosta zaczyna się tam gdzie nie powinna, natomiast kończy się tam gdzie powinna. Jak zrobić by linia pojawiała się i kończyła w tym samym miejscu ?


<!DOCTYPE html>
<HTML>
<HEAD>
<META charset="UTF8">
<link rel="Stylesheet" type="text/css" href="index.css" />
<link href="https://fonts.googleapis.com/css?family=PT+Sans+Caption|Sigmar+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhai" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Days+One|Source+Code+Pro" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald|Raleway" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
  
</HEAD>








<BODY>
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->

<!--img src="darek.png" ></img>-->

	<div class="main">
	
		<div class="surname">Dariusz Hozer </div>
		<div class="portfolio">portfolio</div>
		<div class="straight"></div>
	
	
	
	
	
		<div class="menu">	
			<div class="mojeprace">MOJE PRACE</div>
			<div class="straight1"></div>
			<div class="omnie">O MNIE</div>
			<div class="straight2"></div>
			
	</div>

	</div>
	
<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->	
	
	<div class="centrum"></div>
	
	
	
	

  
  
  
  
  
  
  
  
  
  
  
</div>
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->

<div class="down">

	
</div>




</BODY>
</HTML>






<script>


$(document).ready(function(){
	$('.straight').fadeIn(1200);
	
	

});


$(document).ready(function(){
	
	$('img').slideDown(500);
	


});


$(document).ready(function(){

	$('.mojeprace').click(function(){
    $('.straight1').toggle(1000);
    
});

});






</script>

body{
	
	margin:0px;
	width:100%;
}

.main{
	
    top: 0;
    left: 0;
    right: 0;
	bottom:0;
	width:100%;
	height:55vh;
	background-repeat:no-repeat;
	background-color:black;
	background-size: 100% 100%;	
	
	
}


.surname{
	float:left;
	margin-left:2vh;
	margin-top:2vh;

	font-family: 'Oswald', sans-serif;
	font-size:2.5vh;
	color:white;

}

.portfolio{
	float:left;
	margin-top:3.9vh;
	margin-left:0.3vh;
	font-family: 'Oswald', sans-serif;
	font-size:2vh;
	font-family: 'Oswald', sans-serif;
	font-family: 'Raleway', sans-serif;
	color:#00ffff;
	
}

.straight{
	
width:13.1vh;
height:0.25vh;

background-color:white;	
position:relative;
top:6.61vh;
left:2vh;

display:none;

	
}

img{
	
	
	width:13.1vh;
	height:17vh;
	float:left;
	display:block;
	clear:left; 
	margin-top:2.5vh;
	margin-left:2vh;
	display:none;
	border-radius:1%;
	
	
}












	
.menu{
    float:left;
margin-top:14vh;
margin-left:20vh;	
	width:180vh;
	height:34.6vh;
	
	background-color:black;
	background-size:100% 100%;
}


.mojeprace{
	float:left;
	margin-top:5vh;
	margin-left:12vh;
	width:17vh;
	height:17vh;
	font-size:2vh;
	color:white;
	background-size:100% 100%;
	background-color:white;
	border-radius:100%;
	color:black;
	font-size:3vh;
	font-family: 'Anton', sans-serif;
	text-align:center;
	line-height:17vh;
	
}

.straight1{
	
	width:22vh;
	height:0.5vh;
	position:relative;
	top:27vh;
	left:14vh;
	margin:0vh;
	background-color:white;
	background-size:100% 100%;
	transform:rotate(60deg);
	display:none;
		
}


.omnie{
	float:left;
	margin-left:35vh;
	margin-top:-6vh;
	width:11vh;
	height:11vh;
	font-size:2.5vh;
	color:white;
	background-size:100% 100%;
	background-color:white;
	border-radius:100%;
	color:black;
	
	font-family: 'Anton', sans-serif;
	text-align:center;
	line-height:11vh;
}






  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

.centrum{
	
	width:100%;
	height:350vh;
	background-repeat:no-repeat;
	background-color:white;
	background-size:100% 100%;
    
}





















.down{
	
	width:100%;
	height:19vh;
	background-color:black;
	background-size: 100% 100%;	
	background-repeat:no repeat;

}

komentarz 28 września 2016 przez niezalogowany

1. Znaczniki html pisze się małymi literami

2. "$(document).ready" może wywoływać problemy ze skryptami. W moim przypadku skrypt ( mimo że był dobrze napisany ) ładował się szybciej niż obrazek do niego przypisany i nie działał.

Polecam odmienne rozwiązanie jeżeli chcesz uruchomić skrypty po załadowaniu całej strony:

function myFunction1()
{
    /*...*/
}

function myFunction2()
{
    /*...*/
}

function myFunction3()
{
    /*...*/
}


function beginJS()
{
	myFunction1();
	myFunction2();
	myFunction3();
}

window.onload = beginJS;

Zaraz postaram się oprócz tip'ów dorzucić odpowiedź ;)

EDIT:

Masz niepotrzebne zamknięcie </div> przed <div class="down">

Zwrócił bym uwagę na lepszą semantykę na stronie

1 odpowiedź

odpowiedź 28 września 2016 przez niezalogowany

Twój problem leży w CSS. <div id="mojeprace"> wychodzi poniżej białego kółka, a ".straight1" pojawia się w tamtym miejscu, ponieważ zaczyna od swojej pozycji gdyby hipotetycznie na stronie był.

link - tu masz projekt.

//zaznacz sobie tak jak byś chciał przelecieć przez całe pole. Zobaczysz że masz napis "PRACE" pod miejscem wyznaczonej bieli ;)

Popraw CSS "moich prac" tak by content nie wylewał się poza wyznaczone miejsce i powinno być ok ;)