How to compress and repair divs in jQuery
I am working on a website to help a relative, but I am new to web development and have little experience. Right now, I have several divs that I want to manipulate when scrolling down and undo changes when scrolling up. The problem I'm running into is that the divs resize (shrink / slides / etc) properly after the scrollbar crosses a certain point, but if you go back to the top, nothing happens, so the animations will run only once. ".animate" is the only event that gives me a problem, while the rest of the events run flawlessly. Here is a copy of my HTML code:
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>Sarah Portfolio</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="navigationbar.js"></script>
</head>
<body>
<div id="image">
<img src="Project Images\\Sarah.png" id="Sarah">
</div>
<div id="name">
<h1>Sarah James</h1>
<h2 id="objective">OBJECTIVE</h2>
</div>
<table id="navbar" cellspacing=0>
<tr>
<td><u><i><a href="index.html">Home</a></u><i></td>
<td><a href="resume.html">Resume</a></td>
<td><a href="portfolio.html">Portfolio</a></td>
<td><a href="contact.html">Contact Me</a></td>
</tr>
</table>
<div id="topbar"></div>
<div id="rotatingblock" align="middle">
<img width=90% height=50% class="mySlides" src="Project Images\\AsburyPoolComplex\\page-4-1.jpg">
<img width=90% height=50% class="mySlides" src="Project Images\\AsburyPoolComplex\\page-5-1.jpg">
<img width=90% height=50% class="mySlides" src="Project Images\\AsburyPoolComplex\\page-6-1.jpg">
<script src="rotationblock.js"></script>
</div>
</body>
</html>
And my jQuery code:
$(document).ready(function(){
$(window).scroll(function () {
var $scroll=$(window).scrollTop();
if ($scroll>60){
console.log ("bigger than 40 and is " + $scroll);
$("#name").animate({top:"2%",height:"13%",left:"35%"},500);
$("#image").animate({width:"8%",left:"5%",top:"3%"},500);
$("#navbar").animate({top:"-17%"},500);
$("#topbar").animate({height:"25%"},500);
$("#objective").html("<h2></h2>");
$("td").animate({height:"20%"},500);
$("a").css("font-size","150%");
}
else{
console.log ("smaller than 40 and is " + $scroll);
$("#name").animate({height:"21.5%",left:"40%"},500);
$("#image").animate({width:"15%",left:"0%",top:"2%"},500);
$("#navbar").animate({top:"1.3%"},500);
$("#topbar").animate({height:"43%"},500);
$("#objective").html("OBJECTIVE");
$("td").animate({height:"20%"},500);
$("a").css("font-size","175%");
}
})
})
source to share
If you want to stick with the method you're currently using, try replacing the numbers you have at the end of your animation functions with explicit declarations of what parameters you are adjusting so you can add additional parameters and do the following:
{ duration: whateverMilisecs, queue: false }
So
$("td").animate({height:"20%"},{ duration: 500, queue: false });
However, you may find it easier to use CSS transitions.
Add the .anim class to whatever objects you want to animate with these options:
.anim{
-webkit-transition: all 1s; // Chrome
-moz-transition: all 1s; // Mozilla
-o-transition: all 1s; // Opera
transition: all 1s;
}
and this class is the variant you want to animate:
.doThingy{
transform: translate( 0px, -500px);
}
Then, in your if statements:
if(etcetc)
$(target).addClass('doThingy');
} else {
$(target).removeClass('doThingy);
}
Basically you use CSS to tell the browser that this element will animate. Then you add and remove classes as needed, which triggers the animation.
source to share