We Keep Coding

Image slider - slide animation - jQuery

Ok, i'm stuck.
I need to implement animation on my slider over the jQuery. So far i done arrows (navigation) functionality but, can't figure it out how to add sliding effect (1, 2 seconds) after clicking the "next" and "prev" buttons.
Anyone have idea?
$(document).ready(function() {
$('.next').on('click', function() {
var currentImg = $('.current');
var nextImg = currentImg.next();
if(nextImg.length == 0) {
nextImg = $('.slider-secondary img').first();
}
currentImg.removeClass('current');
nextImg.addClass('current');
});
$('.previous').on('click', function() {
var currentImg = $('.current');
var prevImg = currentImg.prev();
if(prevImg.length == 0) {
prevImg = $('.slider-secondary img').last();
}
currentImg.removeClass('current');
prevImg.addClass('current');
});
});
<div class="container">
<div class="slider-primary">
<img src="Assets/arrow-blue-left.png" class="previous" alt="Prev">
<div class="slider-secondary">
<img src="Assets/slider-image-1.jpg" class="current">
<img src="Assets/slider-image-2.jpg">
<img src="Assets/slider-image-3.jpg">
<img src="Assets/slider-image-4.jpg">
<img src="Assets/slider-image-5.jpg">
<img src="Assets/slider-image-6.jpg">
<img src="Assets/slider-image-7.jpg">
<img src="Assets/slider-image-8.jpg">
<img src="Assets/slider-image-9.jpg">
</div>
<img src="Assets/arrow-blue-right.png" class="next" alt="Next">
</div>
</div>
Thanks a lot guys for your help and references. I appreciate it.
Slider must not be automatic, it can work only on arrows(navigation) click, which are (and must be) images/icons.
Also it's not alowed to use any existing scripts, plugins, etc.. so i tried to implement some further logic having in mind and considering all of the conditions above.
It's actually one part of the code test. And must be in jQuery in which i don't flow so well obviously.
Here is the css part also
*{
margin: 0;
padding: 0;
}
.container, .slider-primary{
width:100%;
margin:auto;
overflow: hidden;
position: relative;
}
.slider-secondary{
width:100%;
height:600px;
position:relative;
overflow:hidden;
float:left;
}
.slider-secondary img{
display:none;
width:100%;
height:100%;
}
.slider-secondary img.current{
display:inline-block;
}
.previous, .next{
float:left;
cursor: pointer;
position: absolute;
top: 45%;
width: 30px;
height: 40px;
}
.previous{
margin-left:35px;
z-index:100;
}
.next{
margin-left:-65px;
z-index:100;
}

You can use jQuery animate() Method. Here is the link to the documentation.
But I would suggest using any jQuery lightweight library for the same.
You can go for Responsive and Flexible Mobile Touch Slider - Swiper
Demo of the same!

Here is one working example. Hope it'll help you. for the full reference visit codepen
$('.slider').each(function() {
var $this = $(this);
var $group = $this.find('.slide_group');
var $slides = $this.find('.slide');
var bulletArray = [];
var currentIndex = 0;
var timeout;
function move(newIndex) {
var animateLeft, slideLeft;
advance();
if ($group.is(':animated') || currentIndex === newIndex) {
return;
}
bulletArray[currentIndex].removeClass('active');
bulletArray[newIndex].addClass('active');
if (newIndex > currentIndex) {
slideLeft = '100%';
animateLeft = '-100%';
} else {
slideLeft = '-100%';
animateLeft = '100%';
}
$slides.eq(newIndex).css({
display: 'block',
left: slideLeft
});
$group.animate({
left: animateLeft
}, function() {
$slides.eq(currentIndex).css({
display: 'none'
});
$slides.eq(newIndex).css({
left: 0
});
$group.css({
left: 0
});
currentIndex = newIndex;
});
}
function advance() {
clearTimeout(timeout);
timeout = setTimeout(function() {
if (currentIndex < ($slides.length - 1)) {
move(currentIndex + 1);
} else {
move(0);
}
}, 4000);
}
$('.next_btn').on('click', function() {
if (currentIndex < ($slides.length - 1)) {
move(currentIndex + 1);
} else {
move(0);
}
});
$('.previous_btn').on('click', function() {
if (currentIndex !== 0) {
move(currentIndex - 1);
} else {
move(3);
}
});
$.each($slides, function(index) {
var $button = $('<a class="slide_btn">•</a>');
if (index === currentIndex) {
$button.addClass('active');
}
$button.on('click', function() {
move(index);
}).appendTo('.slide_buttons');
bulletArray.push($button);
});
advance();
});

Try below way.
I have created a demo for you.
Please Find below code:
Html:
<h1>Incredibly Basic Slider</h1>
<div id="slider">
>
<
<ul>
<li>SLIDE 1</li>
<li style="background: #aaa;">SLIDE 2</li>
<li>SLIDE 3</li>
<li style="background: #aaa;">SLIDE 4</li>
</ul>
</div>
<div class="slider_option">
<input type="checkbox" id="checkbox">
<label for="checkbox">Autoplay Slider</label>
</div>
Css:
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
html {
border-top: 5px solid #fff;
background: #58DDAF;
color: #2a2a2a;
}
html, body {
margin: 0;
padding: 0;
font-family: 'Open Sans';
}
h1 {
color: #fff;
text-align: center;
font-weight: 300;
}
#slider {
position: relative;
overflow: hidden;
margin: 20px auto 0 auto;
border-radius: 4px;
}
#slider ul {
position: relative;
margin: 0;
padding: 0;
height: 200px;
list-style: none;
}
#slider ul li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 500px;
height: 300px;
background: #ccc;
text-align: center;
line-height: 300px;
}
a.control_prev, a.control_next {
position: absolute;
top: 40%;
z-index: 999;
display: block;
padding: 4% 3%;
width: auto;
height: auto;
background: #2a2a2a;
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 18px;
opacity: 0.8;
cursor: pointer;
}
a.control_prev:hover, a.control_next:hover {
opacity: 1;
-webkit-transition: all 0.2s ease;
}
a.control_prev {
border-radius: 0 2px 2px 0;
}
a.control_next {
right: 0;
border-radius: 2px 0 0 2px;
}
.slider_option {
position: relative;
margin: 10px auto;
width: 160px;
font-size: 18px;
}
Js:
jQuery(document).ready(function ($) {
$('#checkbox').change(function(){
setInterval(function () {
moveRight();
}, 3000);
});
var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var slideHeight = $('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;
$('#slider').css({ width: slideWidth, height: slideHeight });
$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
$('#slider ul li:last-child').prependTo('#slider ul');
function moveLeft() {
$('#slider ul').animate({
left: + slideWidth
}, 200, function () {
$('#slider ul li:last-child').prependTo('#slider ul');
$('#slider ul').css('left', '');
});
};
function moveRight() {
$('#slider ul').animate({
left: - slideWidth
}, 200, function () {
$('#slider ul li:first-child').appendTo('#slider ul');
$('#slider ul').css('left', '');
});
};
$('a.control_prev').click(function () {
moveLeft();
});
$('a.control_next').click(function () {
moveRight();
});
});
I hope this will help you.
Let me know if you have any query.
Thank you.

Adding a class to the active slide in carousel

I basically want the centre image in the slider to be twice as big as the others. I need to be able to pass the class active to the centre image and remove it from the last image. So that the centre image is always twice as big. Is it possible to do this with my code?
$(document).ready(function(){
// function active_class(){
// $(".active").next().addClass('active');
// $(".img_cont").index(1).addClass('jiji');
// }
// active_class();
var slide_count = $(".carousel li").length;
var slide_width = $(".carousel li").width();
var slide_height = $(".carousel li").height();
var total_width = slide_width * slide_count;
$(".cont").css({ height: slide_height, width: slide_width, paddingLeft: slide_width , paddingRight: slide_width });
$(".carousel").css({ width: total_width, marginLeft: - slide_width});
$(".carousel li:last-child").prependTo(".carousel");
$("#next").css("right", slide_width);
$("#prev").css("left", slide_width);
function next_slide(){
$(".carousel").animate({
left: + slide_width
}, 400, function(){
$(".carousel li:last-child").prependTo(".carousel");
$('.carousel').css('left', 0);
}
);
}
function prev_slide(){
$(".carousel").animate({
left: - slide_width
}, 400, function(){
$(".carousel li:first-child").appendTo(".carousel");
$(".carousel").css("left", 0);
}
);
}
$("#next").click(function(){
next_slide();
});
$("#prev").click(function(){
prev_slide();
});
var interval_time = 4000; // 1s
var mouse_hover_flag = false;
$(".cont").hover(function(){
mouse_hover_flag = true;
}, function () {
mouse_hover_flag = false;
});
setInterval(function() {
if (!mouse_hover_flag) {//if not true
next_slide();
}
}, interval_time);
});
*{
padding: 0;
margin: 0;
}
body{
margin: 0;
padding: 0;
}
.cont{
position: relative;
text-align: center;
font-size: 0;/*removes white space*/
margin: 60px auto 0 auto;
padding: 0;
overflow: hidden;
}
.carousel{
position: relative;
margin: 0;
padding: 0;
list-style-type: none;
height: 100%;
max-height: 600px;
}
.carousel li{
float: left;
width: 750px;
height: 350px;
}
.carousel li img{
width: 100%;
height: auto;
}
#next{
position: absolute;
top: 45%;
right: 0;
width: 40px;
height: 40px;
background-color: blue;
font-size: 0;
z-index: 1;
}
#prev{
position: absolute;
top: 45%;
left: 0;
width: 40px;
height: 40px;
background-color: blue;
z-index: 1;
}
.img_cont{
transform: scale(0.5);
}
.active{
transform: scale(1);
}
<div class="cont">
<div id="next">
</div>
<div id="prev">
</div>
<ul class="carousel">
<li class="img_cont active">
<img src="http://lorempixel.com/output/abstract-q-c-1500-700-2.jpg" alt="" />
</li>
<li class="img_cont">
<img src="http://lorempixel.com/output/abstract-q-c-1500-700-6.jpg" alt="" />
</li>
<li class="img_cont">
<img src="http://lorempixel.com/output/abstract-q-c-1500-700-1.jpg" alt="" />
</li>
<li class="img_cont">
<img src="http://lorempixel.com/output/abstract-q-c-1500-700-3.jpg" alt="" />
</li>
</ul>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
https://codepen.io/Reece_Dev/pen/OgQLjE

It's easy to remove active class from all li elements, select the first and add the class again.
For example:
function next_slide(){
$(".carousel").animate({
left: + slide_width
}, 400, function(){
$(".carousel li:last-child").prependTo(".carousel");
$('.carousel').css('left', 0);
// Add the following line to prev_slide too:
$('.carousel li').removeClass('active').eq(0).addClass('active');
}
);
}

Hide images outside of view in image slider

I made an image slider but I have a problem. İf you click the next button, it doesn't hide the image on the left side of the slider.
The code is here :
http://codepen.io/ardazaman/pen/zBGMJX
HTML:
<section id="slider">
<div class="arrow">
<
>
</div>
<div class="slider">
<ul>
<li class="slides"><img src="resimler/resim1.jpg"></li>
<li class="slides"><img src="resimler/resim2.jpg"></li>
<li class="slides"><img src="resimler/resim3.jpg"></li>
<li class="slides"><img src="resimler/resim4.jpg"></li>
</ul>
</div>
</section>
CSS:
section#slider {
margin-left: 150px;
border: 3px solid #333;
width: 1004px;
height: 575px;
position: relative;
}
div.slider {
overflow: hidden;
width: 960px;
}
div.slider ul {
list-style-type: none;
overflow: hidden;
}
div.slider ul li {
width: 960px;
float: left;
}
div.slider ul li img {
width: 960px;
}
div.arrow {
font-size: 50px;
position: absolute;
top: 40%;
}
div.arrow a {
text-decoration: none;
background-color: #333;
color: #999;
display: inline-block;
width: 35px;
height: 70px;
line-height: 70px;
}
div.arrow a:nth-child(1) {
margin-left: 20px;
padding-left: 3px;
}
div.arrow a:nth-child(2) {
margin-left: 870px;
padding-left: 3px;
}
jQuery:
$(document).ready(function() {
var liWidth = $('div.slider ul li').width();
var toplamLi = $('div.slider ul li').length;
var toplamWidth = liWidth * toplamLi;
var liDeger = 0;
$('div.slider ul').css({
width: toplamWidth + "px"
});
$('div.arrow a:nth-child(2)').click(function() {
if (liDeger < toplamLi - 1) {
liDeger++;
toplamWidth = liDeger * liWidth;
$('div.slider ul').animate({
marginLeft: '-' + toplamWidth + "px"
}, 500);
}
return false;
});
$('div.arrow a:nth-child(1)').click(function() {
if (liDeger > 0) {
liDeger--;
toplamWidth = liDeger * liWidth;
$('div.slider ul').animate({
marginLeft: '-' + toplamWidth + "px"
}, 500);
}
return false;
});
});

Changes done only to CSS:
1.
div.slider ul {
margin: 0; padding: 0; //added
}
and 2.
div.slider {
margin: 14px auto 0; //added
}
rest is same
$(document).ready(function() {
var liWidth = $('div.slider ul li').width();
var toplamLi = $('div.slider ul li').length;
var toplamWidth = liWidth * toplamLi;
var liDeger = 0;
$('div.slider ul').css({
width: toplamWidth + "px"
});
$('div.arrow a:nth-child(2)').click(function() {
if (liDeger < toplamLi - 1) {
liDeger++;
toplamWidth = liDeger * liWidth;
$('div.slider ul').animate({
marginLeft: '-' + toplamWidth + "px"
}, 500);
}
return false;
});
$('div.arrow a:nth-child(1)').click(function() {
if (liDeger > 0) {
liDeger--;
toplamWidth = liDeger * liWidth;
$('div.slider ul').animate({
marginLeft: '-' + toplamWidth + "px"
}, 500);
}
return false;
});
});
section#slider {
margin-left: 150px;
border: 3px solid #333;
width: 1004px;
height: 575px;
position: relative;
}
div.slider {
overflow: hidden;
width: 960px;
margin: 14px auto 0;
}
div.slider ul {
list-style-type: none;
overflow: hidden;
margin: 0; padding: 0;
}
div.slider ul li {
width: 960px;
float: left;
}
div.slider ul li img {
width: 960px;
}
div.arrow {
font-size: 50px;
position: absolute;
top: 40%;
}
div.arrow a {
text-decoration: none;
background-color: #333;
color: #999;
display: inline-block;
width: 35px;
height: 70px;
line-height: 70px;
text-align:center;
}
div.arrow a:nth-child(1) {
margin-left: 20px;
padding-left: 3px;
}
div.arrow a:nth-child(2) {
margin-left: 870px;
padding-left: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="slider">
<div class="arrow">
<a href="#">
‹ </a>
›
</div>
<div class="slider">
<ul>
<li class="slides"><img src="http://i.hizliresim.com/o78oE9.jpg"></li>
<li class="slides"><img src="http://i.hizliresim.com/l1rmEr.jpg"></li>
<li class="slides"><img src="http://i.hizliresim.com/VYXmEv.jpg"></li>
<li class="slides"><img src="http://i.hizliresim.com/nrmZEM.jpg"></li>
</ul>
</div>
</section>
And here's the codepen link on codepen

The easiest would be to keep track of which image you are showing, and hide the rest by CSS. You already know the index of the list item that contains it (liDeger), so you can use that to show the correct image and hide all the others.
The important part is that you want to show the new image as soon as the sliding starts, but only hide the previous one after the sliding ends.
So for example the "next" arrow:
$('div.arrow a:nth-child(2)').click(function() {
if (liDeger < toplamLi - 1) {
liDeger++;
// Add "active" class to next image
var activeLi = $('.slider li').eq(liDeger);
activeLi.addClass('active');
toplamWidth = liDeger * liWidth;
$('div.slider ul').animate({
marginLeft: '-' + toplamWidth + "px"
}, 500, function() {
// Remove "active" class from previous image after the animation
activeLi.prev().removeClass('active') ;
});
}
return false;
});
And the "previous" arrow goes the other way
$('div.arrow a:nth-child(1)').click(function() {
if (liDeger > 0) {
liDeger--;
// Add "active" class to previous image
var activeLi = $('.slider li').eq(liDeger);
activeLi.addClass('active');
toplamWidth = liDeger * liWidth;
$('div.slider ul').animate({
marginLeft: '-' + toplamWidth + "px"
}, 500, function() {
// Remove "active" class from next image after the animation
activeLi.next().removeClass('active') ;
});
}
return false;
});
Then all you need is some CSS to hide everything but the active image:
div.slider ul li {
visibility: hidden;
}
div.slider ul li.active {
visibility: visible;
}
And add a "active" class to the first list item in the HTML:
<div class="slider">
<ul>
<li class="slides active"><img src="resimler/resim1.jpg"></li>
...
</div>
Working example:
http://codepen.io/anon/pen/RRPEWg

Anchor Link to Target Inside Fieldset

I am linking to sections on the page that are inside collapsed fieldsets.
When a user clicks this link, I want to scroll down the page and open the fieldset to show the content.
I have all the scrolling set up, and it works until I hide the target inside a collapsed fieldset, then functionality breaks.
Section 1
<fieldset class="collapsed">
<div id="section1">
..content
</div>
</fieldset>
And then my jQuery for scrolling...
(function ($) {
var $root = $('html, body');
$('a').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
return false;
});
}(jQuery));
How do I get the click on the anchor to open the fieldset, and then scroll down to it?

Add the <legend> element inside the <fieldset> and target the <legend> as #section1.
Add this to jQuery to toggle the class .collapsed and .expanded:
var exp = $(href).parent();
exp.toggleClass('collapsed', 'expanded');
You need to use CSS as well to create the .collapsed and .expanded states:
.collapsed {
height: 0;
border: none;
}
.expanded {
height: 300px;
}
#section1 {
height: 36px;
position: relative;
z-index: 1;
background: #000;
color: #fc2;
border-radius: 6px;
width: 100%;
}
.collapsed > .content {
font: 400 0/0 'Verdana';
height: 0;
line-height: 0;
opacity: 0;
}
.content {
position: relative;
top: 0;
left: 0;
height: 100%;
width: auto;
font: 400 16px/1.4 'Verdana';
}
The HTML is modified so you can click the <legend> of the <fieldset> and toggle .collapsed and .expanded as well.
<fieldset class="collapsed">
<legend id="section1">Heading</legend>
<div class="content">
..content XXXXX xxxxxxxxxxxnnnnnnnnnnnnn hbyigyugvyibrgh fwgewg wefgeh bbbbb uhuhouihoijpiok erhtru efwgwrhnj
</div>
</fieldset>
Snippet
(function($) {
var $root = $('html, body');
$('a').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 500, function() {
window.location.hash = href;
});
var exp = $(href).parent();
exp.toggleClass('collapsed', 'expanded');
return false;
});
}(jQuery));
body {
font: 400 16px/1.4 'Verdana';
}
fieldset {
width: 400px;
position: relative;
}
legend {
margin-top: 25%;
text-align: center;
font-size: 24px;
}
a {
width: 100%;
text-decoration: none;
display: inline-block;
}
.collapsed {
height: 0;
border: none;
}
.expanded {
height: 300px;
}
#section1 {
height: 36px;
position: relative;
z-index: 1;
background: #000;
color: #fc2;
border-radius: 6px;
width: 100%;
}
.collapsed > .content {
font: 400 0/0 'Verdana';
height: 0;
line-height: 0;
opacity: 0;
}
.content {
position: relative;
top: 0;
left: 0;
height: 100%;
width: auto;
font: 400 16px/1.4 'Verdana';
}
.spacer {
height: 700px;
clear: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
Section 1
<!--For demo-->
<div class="spacer"></div>
<fieldset class="collapsed">
<legend id="section1">Heading</legend>
<div class="content">
..content XXXXX xxxxxxxxxxxnnnnnnnnnnnnn hbyigyugvyibrgh fwgewg wefgeh bbbbb uhuhouihoijpiok erhtru efwgwrhnj
</div>
</fieldset>

(function ($) {
var $root = $('html, body');
$('a').click(function() {
var href = $.attr(this, 'href');
$(href).parent().show(); //updated line
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
return false;
});
}(jQuery));
Just made a simple change. Which you can see on, commented line above.

Why is my JQuery running slow?

I am extremely new to JQuery, I just started looking into it today. I have searched all around for what might be causing this bit of code to not work. When you scroll down, I want the h1 to move to the side and a menu button to appear. That works, but when I scroll back up again, it takes an extremely long time to reverse itself. I have tried to fine anything that might be causing it like a delay or something, but as far as I can see, there isn't any problems.
Link to website: http://www.dragonmath.net/rockets
Here is my code:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles/main.css" />
<title>Rockets</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<header>
<img id="menu" src="images/menu1.png" />
<div id="headerdiv">
<h1>Rockets</h1>
<img id="logo" src="images/logo1.png" />
</div>
</header>
<nav>
<ul>
<li>
<a>Space Race</a>
</li>
<li>
<a>SpaceX</a>
</li>
</ul>
</nav>
<script>
$( document ).ready(function() {
var $menu = $('img#menu');
var $headerdiv = $("div#headerdiv")
var $nav = $('nav');
$(window).on('scroll', function () {
if ($(window).scrollTop() > 40) {
$headerdiv.addClass("testheaderdiv");
$menu.delay(800).slideDown(800);
$nav.addClass('testnav');
}
if ($(window).scrollTop() < 40) {
$menu.slideUp(800, function () {
$headerdiv.removeClass('testheaderdiv');
});
$nav.removeClass('testnav');
}
});
});
</script>
</body>
</html>
CSS
* {
margin: 0px;
padding: 0px;
color: #00AAFF;
font-family: Arial;
}
body {
height: 800px;
}
header {
position: fixed;
top: 0px;
left: 0px;
height: 100px;
width: 100%;
background-color: #333;
z-index: 1;
}
div#headerdiv {
display: inline;
transition: all 1s;
}
h1 {
display: inline;
margin-left: 40px;
font-size: 40px;
}
header > img#menu {
position: fixed;
top: 20px;
left: 40px;
width: 40px;
height: 40px;
display: none;
}
header > div > img#logo {
display: inline;
width: 60px;
height: 60px;
position: relative;
top: 18px;
left: 20px;
transition: height 1s, width 1s;
}
nav {
position: relative;
top: 100px;
height: 40px;
width: 100%;
background-color: #333;
}
nav > ul {
list-style: none;
}
nav > ul > li {
display: inline-block;
height: 40px;
width: 200px;
text-align: center;
border-right: 1px solid #00AAFF;
}
nav > ul > li > a {
position: relative;
top: 6px;
}
.testheaderdiv {
margin-left: 80px;
transition: all 1s;
}
.testnav {
display: none;
}

The main problem I could see with the code is how scroll is handled, for every scroll event you are adding delay to the menu element.
So try
$(document).ready(function () {
var $menu = $('img#menu');
var $headerdiv = $("div#headerdiv")
var $nav = $('nav');
var flag;
$(window).on('scroll', function () {
if (flag !== 1 && $(window).scrollTop() > 40) {
$headerdiv.addClass("testheaderdiv");
$menu.stop(true, true).delay(800).slideDown(800);
$nav.addClass('testnav');
flag = 1;
}
if (flag !== 2 && $(window).scrollTop() < 40) {
$menu.stop(true, true).slideUp(800, function () {
$headerdiv.removeClass('testheaderdiv');
});
$nav.removeClass('testnav');
flag = 2;
}
});
});