Why won't my jQuery animate effect work? - javascript

this is the html, all in the head:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>
where the 2nd is my js document!!
The js document looks like this:
$(document).ready(function() {
$("li").fadeTo(0, 0.6),
$("li").mouseenter(function() {
$(this).fadeTo(100, 1),
$(this).animate({top: "-=20px"},"fast")
});
$("li").mouseleave(function() {
$(this).fadeTo(100, 0.6),
$(this).animate({top: "=20px"},"fast")
});
});
The opacity works, but not the animation, what is wrong?

Your <li> elements need to have a position value of fixed, relative or absolute if you are animating the top CSS. Without it, the animation will still complete, but you won't see any visual effect in the browser.
$(document).ready(function() {
$("li").fadeTo(0, 0.6),
$("li").mouseenter(function() {
$(this).fadeTo(100, 1),
$(this).animate({top: "-=20px"},"fast")
});
$("li").mouseleave(function() {
$(this).fadeTo(100, 0.6),
$(this).animate({top: "=20px"},"fast")
});
});
li {
position:absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Related

How to apply animations to items in a list

I am new to HTML, CSS and JS/jQuery. I'm creating a test website just to get familiar with jQuery and can't seem to figure an issue out.
I have a navigation bar at the top of the page which contains a logo on the left and links on the right. I've set up the below jQuery code to fade the links in and out upon mouse enter/leave:
$(document).ready(main);
function main() {
$('.marquee').marquee({
/* pauseOnHover: true */
})
$('.nameorlogo, .navitems').mouseenter(function() {
$('.nameorlogo').fadeTo('fast', 1);
$('.navitems').fadeTo('fast', 1);
})
$('.nameorlogo, .navitems').mouseleave(function() {
$('.nameorlogo').fadeTo('fast', 0.5);
$('.navitems').fadeTo('fast', 0.5);
})
};
Here is the html:
<!DOCTYPE html>
<html>
<head>
<title>JSTest1</title>
<link href="../css/style.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src='../js/jquery-3.2.0.js'></script>
<script type="text/javascript" src='../js/main.js'></script>
<script type="text/javascript" src='../js/marquee.js'></script>
</head>
<body>
<header class=topheader>
<nav class=navtop>
<div class=nameorlogo>
<h1>JSTest1</h1>
</div>
<div>
<ul class=navitems>
<li>Contact</li>
<li>Services</li>
<li>About</li>
<li>Home</li>
</ul>
</div>
</nav>
</header>
<main>
<div class=marquee>This is a test for JavaScript</div>
</main>
</body>
</html>
The problem I have is when I hover over a link, either nav links or the logo, everything fades in and out, I want them all to be independant.
I know you can do this in CSS, this is purely to help me learn and understand.
Thanks for your help.
Jim
Use the the this keyword like $(this) to refer to the currently hovered item
$(this).fadeTo('fast', 1);
Also, notice that .navitems is the whole UL element, while you need to target the LI elements. Therefore
$('.nameorlogo, .navitems li').mouseenter(function()
Additionally here's other similar ways to achieve what you desire:
using .on() method
$('.nameorlogo, .navitems li').on({
mouseenter : function() {
$(this).stop().fadeTo(250, 1);
},
mouseleave : function() {
$(this).stop().fadeTo(250, 0.5);
},
});
// .stop() is here to prevent animation buildups
.nameorlogo,
.navitems li{
opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=nameorlogo>
<h1>JSTest1</h1>
</div>
<div>
<ul class=navitems>
<li>Contact</li>
<li>Services</li>
<li>About</li>
<li>Home</li>
</ul>
</div>
Using .hover() method
$('.nameorlogo, .navitems li').hover(function(evt) {
var isMouEnt = evt.type === "mouseenter";
$(this).stop().fadeTo(250, isMouEnt ? 1 : 0.5);
});
// .stop() is here to prevent animation buildups
.nameorlogo,
.navitems li{
opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=nameorlogo>
<h1>JSTest1</h1>
</div>
<div>
<ul class=navitems>
<li>Contact</li>
<li>Services</li>
<li>About</li>
<li>Home</li>
</ul>
</div>

When click on menu, it opens, when click again it close

I have very basic:
// jQuery Document
var main = function() {
/* Push the body and the nav over by 285px over */
$('#share').click(function() {
$('.menu').animate({
right: "0px"
}, 200);
$('body').animate({
right: "285px"
}, 200);
});
/* Then push them back */
$('html').click(function() {
$('.menu').animate({
right: "-285px"
}, 200);
$('body').animate({
right: "0px"
}, 200);
});
};
$(document).ready(main);
And, I want to do something like this.. If user clicks on menu icon (#share), menu will appear, if menu is visible and user clicks again, it will disappear..How to SIMPLY do it?? i want to do it just as simple as possible... please help me :)
And yeah... I wrote something like if html. click.. then close the menu.. There should be the name of the menu icon (#share)
there is menus css:
.menu {
background-color: #373737;
right: -285px;
height: 100%;
position: fixed;
width: 285px;
}
and html:
<!DOCTYPE html>
<html>
<head>
<title>Minecraft</title>
<link href="styles_m.css" rel="stylesheet" type="text/css">
</head
<body>
<div class="menu">
</div>
<div id="header">
<div id="main">
<img src="my_logo.png">
</div>
<div id="share">
<img name="menu" src="my_menu.png">
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="main.js">
</script>
</body
</html>
Just use fadeToggle():
$(function () {
$(".showMenu").click(function () {
$(this).next(".menu").fadeToggle(400);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="showMenu">Show Menu</button>
<div class="menu" style="display: none;">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
Or if you wanna make it slide right, you can use animations:
Just use animate():
$(function () {
$(".showMenu").click(function () {
if ($(this).next(".menu").css("left") != "0px")
$(this).next(".menu").animate({
left: 0
}, 1000);
else
$(this).next(".menu").animate({
left: -250
}, 1000);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="showMenu">Show Menu</button>
<div class="menu" style="position: relative; left: -250px;">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
You can also use a variable control to know when to show/hide the element (jsFiddle):
var control = false;
var main = function() {
$('#share').click(function() {
if( control === true ){
$('.menu').animate({
right: "-285px"
}, 200);
$('body').animate({
right: "0px"
}, 200);
control = false;
return;
}
control = true;
$('.menu').animate({ right: "0px" }, 200);
$('body').animate({ right: "285px" }, 200);
});
};
$('button').click(function() {
$('.menu').slideToggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>click</button>
<div class="menu" style="display:none;">
<ul>
<li>menu 1</li>
<li>menu1</li>
<li>menu 3</li>
<li>menu 4</li>
</ul>
</div>
HTML 5 data tags can be the solutions. Have a look at my fiddle
$('.showMenu').click(function() {
var active = $('.menu').data('active');
if(active === 'N') {
$('.showMenu').html('Hide Menu');
$('.menu').fadeIn(100);
$('.menu').data('active', 'Y');
} else {
$('.showMenu').html('Show Menu');
$('.menu').fadeOut(100);
$('.menu').data('active', 'N');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="showMenu">Show Menu</button>
<div class="menu" data-active="N" style="display: none;">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
You could use the fadeToggle function:
$(document).ready(function() {
$('icon').click(function() {
$('dropdown element').fadeToggle(400);
});
});
An example can be found here: https://www.w3schools.com/jquery/eff_fadetoggle.asp

How to continue the method .animate instead of restarting it on mouse leave?

I have this carousel. Mouseenter stop and mouseleave restart method .animate from the beggining. Any idea about how can I do to instead to restart the method on mouseleave finish it?
I mean, the method .animate go to marginLeft -124 now... So when you put the mouse on the animation stop.. to here cool, but if I release the mouse the animation start again from scratch but I want the animation keep going to the end...
"if I put the mouse on, the method will stop for example at margin left -60... so from here I want to continue to 0 instead to restart from -124 again"
I hope have been clear
Thanks in advance
$(function() {
var list = $('ul');
var perro = $('.perro');
function onAnimate() {
$('ul li:first-child').appendTo('ul');
$('ul li:last-child').css('margin-Left', 0);
move();
}
function move() {
$('ul li:first-child')
.animate({ marginLeft: -124 }, 1500, onAnimate);
}
list.find('li:even').addClass('even');
list.find('li:odd').addClass('odd');
list.on('mouseenter', 'li', function() {
$('ul li:first-child').stop();
});
list.on('mouseleave', move);
move();
});
div { width:1080px;overflow:hidden; }
ul { list-style-type:none;width:10000px;margin:0;padding:0; }
li { height:400px;width:108px;float:left;text-align:center;margin:0;padding:0; }
.even {background: #ccc}
.odd {background: #4e4e4e;color:#fff;}
#tomas {
width: 600px;
height: 200px;
background-color: #000;
}
<html>
<head>
<meta charset="UTF-8">
<title>Documento sin título</title>
<link href="carutomstyle.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="carujava.js"></script>
</head>
<body>
<div id="new-carousel">
<ul>
<li class="perro">Item #1</li>
<li class="perro">Item #2</li>
<li class="perro">Item #3</li>
<li class="perro">Item #4</li>
<li class="perro">Item #5</li>
<li class="perro">Item #6</li>
<li class="perro">Item #7</li>
<li class="perro">Item #8</li>
<li class="perro">Item #9</li>
<li class="perro">Item #10</li>
<li class="perro">Item #11</li>
<li class="perro">Item #12</li>
</ul>
</div>
</body>
</html>
I added new function called reset
list.on('mouseleave', reset);
function reset(){
perro.each(function(e){
list.append($('#item'+e, list));
});
move();
}
DEMO

how to target specific css element in javascript?

I've got my code:
$(document).ready(function() {
$('#topznav ul li').click(function() {
$('#topznav').animate({
marginLeft: '10px'
}, 400);
});
});
I've got a question about the second line. It won't work. I mean, nothing really animates. The script file is loaded correctly because other functions work. What am I doing wrong here?
try this:
$(document).ready(function() {
$('#topznav ul li').click(function() {
$('#topznav').animate({
marginLeft: '+=10px'
}, 400);
});
});
Here I am posting what I got
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#topznav ul li').click(function() {
$('#topznav').animate({
marginLeft: '+=10px'
}, 400);
});
});
</script>
</head>
<body>
<div id="topznav">
<ul >
<li>
test1
</li>
<li>
test2
</li>
<li>
test3
</li>
</ul>
</div>
</body>
</html>
This works fine

Regarding Combining Two Small Javascript Codes

Basically the question is self explanitory. I can't figure out how to combine small snippets of javascript rather than having two separate files.
The two codes are :
$(function(){
$('.navbar li').each(function(){
if(window.location.href.indexOf($(this).find('a:first').attr('href'))>-1)
{
$(this).addClass('active').siblings().removeClass('active');
}
});
});
$(function(){
$('.dropdown-menu li').each(function(){
if(window.location.href.indexOf($(this).find('a:first').attr('href'))>-1)
{
$(this).removeClass('active')
}
});
});
Another question, is the first $(function() necessary?
Thanks for you help.
You can do this way:
Create a function and call it under it. Or, you do this:
$(function(){
$('.navbar li').each(function(){
if(window.location.href.indexOf($(this).find('a:first').attr('href'))>-1)
{
$(this).addClass('active').siblings().removeClass('active');
}
});
$('.dropdown-menu li').each(function(){
if(window.location.href.indexOf($(this).find('a:first').attr('href'))>-1)
{
$(this).removeClass('active')
}
});
});
Some notes:
Those two functions are different.
You don't need the two function starters, $(function(){}) twice.
You can make it like this:
$(function(){
$('.navbar li, .dropdown-menu li').each(function(){
if(window.location.href.indexOf($(this).find('a:first').attr('href'))>-1)
{
if($(this).parents(".navbar").length > 0)//this is to figure out if we are working with LI inside .navbar or not.
$(this).addClass('active').siblings().removeClass('active');
else
$(this).removeClass('active')
}
});
});
Functions are almost equal, except that you need to detect if you are working with LI from .navbar or not to select corect removeClass code.
Also, in your code first $(function() is necessary. Otherwise code inside it could be started before document is loaded. But you may put both pieces of code inside one $(function()
Full working sample, this will make the first LI of first UL red, and remove the red from the second ul LI. Your two functions are now combined.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<title></title>
<style type="text/css">
.active {background-color:red}
ul.dropdown-menu>li.active {background-color:red}
</style>
</head>
<body>
</body>
<ul class="navbar">
<li>first</li>
<li>old</li>
<li>new</li>
<li>4</li>
</ul>
<ul class="dropdown-menu">
<li class="active">first</li>
<li>old</li>
<li>new</li>
<li>4</li>
</ul>
<script type="text/javascript">
$(function(){
$('.navbar li').each(function(){
if(window.location.href.indexOf($(this).find('a:first').attr('href'))>-1)
{
$(this).addClass('active').siblings().removeClass('active');
}
});
$('.dropdown-menu li').each(function(){
if(window.location.href.indexOf($(this).find('a:first').attr('href'))>-1)
{
$(this).removeClass('active')
}
});
});
</script>
</html>

Categories

Resources