为什么我的网站上的效果会影响我的文字位置？ [英] Why does my effects on my website effect my text position?

查看：78
本文介绍了为什么我的网站上的效果会影响我的文字位置？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的网站有一个下拉框和一个按钮，可以在点击时显示每个效果。我在这里的墙上。我有完成所有效果的图片但是当效果发生时，文本位置会在效果发生时发生变化，然后重置。我在代码中错过了什么来纠正这个问题？



这是我的CSS代码：



I have a website that has a drop down box and a button to show each effect when clicked. I am at a wall here. I have the picture doing all of the effects but when the effect occurs the text position changes while the effect is happening and then resets. What did I miss in my code to correct this?

Here is my CSS Code:

header, nav, main, footer { display: block; }
* { box-sizing: border-box; } 
* {margin: 0px; padding: 0px; }
body    {   
		background-color: #F5F5F5;
        color: #3F2860;
        font-family: Verdana, Arial, sans-serif;
		margin-left: 0px;
		margin-top: 0px;
}

#wrapper {
			background-color: #F5F5F5;
			min-width: 1200px;
			max-width: 1480px;
			margin-left:  auto;
			margin-right: auto;
			width: 990px;
}

img {
		border: none;
}

header  {
		background-color: #9BC1C2;
		background-image: url(images/lilyheader.jpg);
		background-position: right;
		background-repeat: no-repeat;
		height: 150px;
        
}  

#feedback { font-size: 1.4em; 
}

#selectable .ui-selecting { background: #FECA40; 
 }
#selectable .ui-selected { background: #F39814; 
						  color: white; 
}
#selectable { list-style-type: none; 
              margin: 0; 
              padding: 0; 
              width: 100%; 
}
#selectable li { margin: 3px; padding: 0.4em; 
			   font-size: 1.4em; 
              height: 18px; 
}

.toggler { width: 90%; 
}

#effect { width: 90%;
		  height: 10px;
		  position: static; 
}

p {
	background-color: #C8DDDE;
	width: 90%;
	padding: 1em;
	margin-left: 0;
	margin-right: 0;
	margin-top: 1em;
	margin-bottom: 1em;	
}

div p{
	padding: 0;
}
form{
	padding: 3em;
} 

label {
		float: left;
		display: block;
		text-align: right;
		font-weight: bold;
		width: 10em;
		padding-right: 1em;
}

input, textarea {

		display: block;
		margin-bottom: 2em;
}

#mySubmit{
	
		margin-left: 12em;
}

aside {
		width: 390px;
		float: left;
}	

#content {
		width: 990px;
}

h1      {
		padding-top: 50px; padding-left: 2em;
}

nav     {
		font-weight: bold;
        text-align: center;
		float: left;
		width: 160px;
		padding: 1em;
}

nav a   {
		text-decoration: none;
		padding: 1em;
		display: block;
		text-align: center;
		font-weight: bold;
		border: 3px outset #CCCCCC;
		margin-bottom: 1em;}
		nav a:link { color: #3F2860; }
		nav a:visited{ color: #497777; }
		nav a:hover { color: #A26100;} 
		border: 3px inset #333333; 
}

nav ul { 
		list-style-type: none; 
		padding-left: 0;
}

main {
		margin-left: 170px;
		padding-top: 1em;
		padding-right: 2em;
}

.studio  {
		font-style: italic;
}

footer  {
		background-color:#9BC1C2;
        font-size: 0.60em;
        font-style: italic;
        text-align: center;
		padding: 1em;
		height: 50px;
		clear: both;
}

.clear { clear: both; 
}

.floatleft { float: left; margin-right: 4em;
}

#mobile{display: none;
}

#desktop{display: inline;
}

table { width: 60%;
      margin: auto;
	  margin-bottom: 1em;
      border: 1px solid #3F3860;
	  border-collapse: collapse; 
}

caption { font-weight: bold;
        font-size: 120%;
        margin: 1em;		
}

th, td {  border: 1px solid #3F3860; 
		padding: 5px; 
}

tr:nth-of-type(even) { background-color: #98C1C2; 
}

@media only screen and (max-width: 1024px){

body { 
		margin: 0; 
		padding: 0; 
}

#wrapper { 
			width: 100%; 
	        min-width: 0;
			margin: 0;
			padding: 0; 
}

header { padding-top: 1px;
}
	
h1 { 
	padding-top: 1em; 
	padding-left: 0.5em; 
}
	
nav { 
	float: none;
	width: auto; 
}
	
nav a { 
	 padding: 0.2em;
	 margin-left: 0.3em; 
	 float: left;
     width: 24%; 
}

main {
		padding: 0 0 0 2em;
	    margin: 0;
		font-size: 90%;
		clear: both;
}

#hero img { 
			width: 100%;
	        height: auto; 
}

h2, h3, p, dl { 
		padding-left: 2em; 
		padding-right: 2em;
}

main ul { margin-left: 2em;
} 

.floatleft {
	margin-left: 2em; 
	margin-bottom: 1em;
}

.clear { 
	padding-left: 2em; }
}

@media only all and (max-width: 768px) {
	
h1 { font-size: 2em;
	padding-top: 0.25em;
	padding-left: 1.5em;
	text-align: center;
	width: 85%;
}

nav a { padding: 0.5em;
	  width: 45%;
	  float: left;
	  min-width: 6em;
	  margin-left: 0.5em;
}

#hero { display: none; 
}

.floatleft { float: none; 
			display: none; 
}

footer { padding: 0.5em; 
	   margin: 0;
}

#mobile { display: inline; 
}

#desktop { display: none;}
}





这是我的HTML代码：





Here is my HTML Code:

<!DOCTYPE html>


<html lang="en">

<head>
	<title>Path of Light Yoga Studio</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
	<script src="jquery/pichide.js" type="text/javascript"></script>
	<!--[if lt IE 9]>
	<script src="//cdnjs.cloudflare.com/ajax/libs//html5shiv/3.7.3/html5shiv.min.js">
	</script>
	<![endif]-->
</head>
<body>
	<div id="wrapper">
	<header><h1>Path of Light Yoga Studio</h1></header>
		
			<a href="index.html">Home</a>
			<a href="Classes.html">Classes</a>
			<a href="Schedule.html">Schedule</a> 
			<a href="Contact.html">Contact</a> 
			<a href="Store.html">Store</a>
		
	
	
	<div class="toggler">
    <div id="effect" class="ui-widget-content ui-corner-all">
  
	<aside>
	   
	   </aside>
	</div>
		<h2>Find Your Inner Light</h2>
		<br>
			<div id="p">
				<span class="studio">Path of Life Yoga Studio</span> provides all levels of yoga pratice in a tranquil, peaceful environment. Whether you are new 
				to yoga or an experienced practitioner, our dedicated instructors can develop a practice to meet your needs. 
				Let your inner light shine at the <span class="studio">Path of Life Yoga Studio</span>.
			<p></p>
<br>
			<ul>
				<li>Hatha, Vinyasa, and Restorative Yoga Classes</li>
				<li>Drop-ins welcome</li>
				<li>Mats, blocks, and blankets provided</li>
				<li>Relax in our Serenity Lounge before or after your class</li>
			</ul>
<br>
<br>

<select name="effects" id="effectTypes">
  <option value="blind">Blind</option>
  <option value="bounce">Bounce</option>
  <option value="clip">Clip</option>
  <option value="drop">Drop</option>
  <option value="explode">Explode</option>
  <option value="fade">Fade</option>
  <option value="fold">Fold</option>
  <option value="highlight">Highlight</option>
  <option value="puff">Puff</option>
  <option value="pulsate">Pulsate</option>
  <option value="scale">Scale</option>
  <option value="shake">Shake</option>
  <option value="size">Size</option>
  <option value="slide">Slide</option>
</select>

<button id="button" class="ui-state-default ui-corner-all">Run Effect</button>
		<div class="clear">
		<br>
		<span class="studio">Path of Life Yoga Studio</span><br>
			612 Serentity Way<br>
			El Dorado, CA 96162<br>
			<br>
			<a id="mobile">888-555-5555</a><br>
			<span id="desktop">888-555-5555</span><br>
			<br>
			<br>
		</div>
	</div></div>

        Copyright © Path of Light Yoga<br>
        <a>khopkin5@my.westga.edu</a>

</div>
</body>
</html>

Here is my jQuery Code:

<pre lang="Javascript">    $( function() {
    // run the currently selected effect
    function runEffect() {
      // get effect type from
      var selectedEffect = $( "#effectTypes" ).val();
 
      // Most effect types need no options passed by default
      var options = {};
      // some effects have required parameters
      if ( selectedEffect === "scale" ) {
        options = { percent: 50 };
      } else if ( selectedEffect === "size" ) {
        options = { to: { width: 200, height: 60 } };
      }
 
      // Run the effect
      $( "#effect" ).hide( selectedEffect, options, 1000, callback );
    };
 
    // Callback function to bring a hidden box back
    function callback() {
      setTimeout(function() {
        $( "#effect" ).removeAttr( "style" ).hide().fadeIn();
      }, 1000 );
    };
 
    // Set effect from select menu value
    $( "#button" ).on( "click", function() {
      runEffect();
    });
  } );





What I have tried:



I have tried to use the position code in css.



What I have tried:

I have tried to use the position code in css.

推荐答案

( function() {
// run the currently selected effect
function runEffect() {
// get effect type from
var selectedEffect =
( function() { // run the currently selected effect function runEffect() { // get effect type from var selectedEffect =


( \"#effectTypes\" ).val();

// Most effect types need no options passed by default
var options = {};
// some effects have required parameters
if ( selectedEffect === \"scale\" ) {
options = { percent: 50 };
} else if ( selectedEffect === \"size\" ) {
options = { to: { width: 200, height: 60 } };
}

// Run the effect
( "#effectTypes" ).val(); // Most effect types need no options passed by default var options = {}; // some effects have required parameters if ( selectedEffect === "scale" ) { options = { percent: 50 }; } else if ( selectedEffect === "size" ) { options = { to: { width: 200, height: 60 } }; } // Run the effect


( \"#effect\" ).hide( selectedEffect, options, 1000, callback );
};

// Callback function to bring a hidden box back
function callback( ) {
setTimeout(function() {
( "#effect" ).hide( selectedEffect, options, 1000, callback ); }; // Callback function to bring a hidden box back function callback() { setTimeout(function() {


这篇关于为什么我的网站上的效果会影响我的文字位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发语言最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆