Why doesn't jquery work? - javascript

I followed a tutorial and created a simple web page. Here is the html part:
$(document).ready(function() {
//when mouse rolls over
$("li").mouseover(function() {
$(this).stop().animate({
height: '150px'
}, {
queue: false.duration: 600,
easing: 'easeOutBounce'
})
});
//when mouse went away
$("li").mouseout(function() {
$(this.stop().animate({
height: '50px'
}, {
queue: false,
duration: 600,
easing: 'easeOutBounce'
})
});
});
body {
font-family: "Lucida Grande", arial. sans-serif;
background: #f3f3f3;
}
ul {
margin: 0;
padding: 0;
}
li {
width: 100px;
height: 50px;
float: left;
color: #191919;
text-align: center;
overflow: hidden;
}
a {
color: #fff;
text-decoration: none;
}
p {
padding: 0px 5px;
}
.subtext {
padding-top: 15px;
}
.green {
background: #6AA63B;
}
.yellow {
background: yellow;
}
.red {
background: #D52100;
}
.purple {
background: #5122B4;
}
.blue {
background: #0292c0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Does this suit for title</title>
<link rel="stylesheet" href="animate-menu.css">
<script src="js/jquery.easing.1.3.js"></script>
<script src="njmt-menu.js"></script>
</head>
<body>
<p>Rollover a menu item to expand it</p>
<ul>
<li class="green">
<p>Home</p>
<p class="subtext">The front page</p>
</li>
<li class="yellow">
<p>about</p>
<p class="subtext">more info</p>
</li>
<li class="red">
<p>contact</p>
<p class="subtext">get in touch</p>
</li>
<li class="blue">
<p>SBMT</p>
<p class="subtext">Send us your Mary Jane</p>
</li>
<li class="purple">
<p>TRMS</p>
<p class="subtext">LGLTY</p>
</li>
</ul>
</body>
</html>
Somewhy when I put mouse over the areas of "red","yellow" etc objects,nothing happens. All the routes to the js files are correct.


There was two errors in your code and your code was not getting jQuery.easing.js. Look here:
$(document).ready(function() {
//when mouse rolls over
$("li").mouseover(function() {
$(this).stop().animate({
height: '150px'
}, {
queue: false, //removed . and added , after queue: false
duration: 600,
easing: 'easeOutBounce'
})
});
//when mouse went away
$("li").mouseout(function() {
$(this).stop().animate({ //added ) after $(this
height: '50px'
}, {
queue: false,
duration: 600,
easing: 'easeOutBounce'
});
});
});
body { font-family: "Lucida Grande", arial. sans-serif; background: #f3f3f3; }
ul { margin: 0; padding: 0; }
li { width: 100px; height: 50px; float: left; color: #191919; text-align: center; overflow: hidden; }
a { color: #fff; text-decoration: none; }
p { padding: 0px 5px; }
.subtext { padding-top: 15px; }
.green { background: #6AA63B; }
.yellow { background: yellow; }
.red { background: #D52100; }
.purple { background: #5122B4; }
.blue { background: #0292c0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<!-- added cdn directly for jquery.easing.js -->
<p>Rollover a menu item to expand it</p>
<ul>
<li class = "green">
<p>Home</p>
<p class="subtext">The front page</p>
</li>
<li class = "yellow">
<p>about</p>
<p class="subtext">more info</p>
</li>
<li class = "red">
<p>contact</p>
<p class="subtext">get in touch</p>
</li>
<li class = "blue">
<p>SBMT</p>
<p class="subtext">Send us your Mary Jane</p>
</li>
<li class = "purple">
<p>TRMS</p>
<p class="subtext">LGLTY</p>
</li>
</ul>
You can see working fiddle here.


Have you tried to check the console for any error messages? Seems like you mistyped "js/jquert.easing.1.3.js"
It should be "js/jquery.easing.1.3.js"


Please replace . with , from this function $("li").mouseover(function(){
Instead of:
{queue:false. duration:600, easing:'easeOutBounce'})
Should be:
{queue:false, duration:600, easing:'easeOutBounce'})


Put your script inside your body tag and you are calling jQuery script twice remove that and try again sometimes these improper initialization may be the reason
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Does this suit for title</title>
<link rel="stylesheet" href="animate-menu.css">
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script src="js/jquert.easing.1.3.js"></script>
<script src="njmt-menu.js"></script>
</head>
<body>
<p>Rollover a menu item to expand it</p>
<ul>
<li class="green">
<p>Home</p>
<p class="subtext">The front page</p>
</li>
<li class="yellow">
<p>about</p>
<p class="subtext">more info</p>
</li>
<li class="red">
<p>contact</p>
<p class="subtext">get in touch</p>
</li>
<li class="blue">
<p>SBMT</p>
<p class="subtext">Send us your Mary Jane</p>
</li>
<li class="purple">
<p>TRMS</p>
<p class="subtext">LGLTY</p>
</li>
</ul>
<script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/jquert.easing.1.3.js"></script>
<script src="njmt-menu.js"></script>
</body>
</html>

Related

Jquery animation switch div slowly with animation

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style type="text/css">
.header {
position: absolute;
top: 0px;
height: 50px;
width: 100%;
background: #f00;
}
</style>
</head>
<body>
<ul>
<li>
<div class="header">
<p>Header</p>
</div>
</li>
<li>
<div class="header">
<p>Hello World</p>
</div>
</li>
<li>
<div class="header">
<p>Footer</p>
</div>
</li>
</ul>
<script>
$(".header").on("click", function () {
var e = $(this).closest("li");
e.prev().insertAfter(e);
})
</script>
</body>
</html>
I am trying to switch the li element with animation which will be like slowly moving upwards but can't seem to make it, above is what I have practiced till now and I am weak at jquery animation hope to get your feedback/help what I want is animation like this code http://jsfiddle.net/BYossarian/GUsYQ/5/ any answer or help would be appreciated. Manga read

your CSS does not visible effect on this animation
var animating = false;
$(".header").on("click", function() {
var clickedDiv = $(this).closest("li");
if (animating) {
return;
}
prevDiv = clickedDiv.prev(),
distance = clickedDiv.outerHeight();
if (prevDiv.length) {
animating = true;
$.when(clickedDiv.animate({
top: -distance
}, 600),
prevDiv.animate({
top: distance
}, 600)).done(function () {
prevDiv.css('top', '0px');
clickedDiv.css('top', '0px');
clickedDiv.insertBefore(prevDiv);
animating = false;
});
}
});
li {
width: 200px;
border: 1px solid black;
position: relative;
margin:10px;
}
li .header {
border: 1px solid black;
position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<div class="header">
<p>Header</p>
</div>
</li>
<li>
<div class="header">
<p>Hello World</p>
</div>
</li>
<li>
<div class="header">
<p>Footer</p>
</div>
</li>
</ul>

How to change element dragged in sortable JQuery

I keep getting the Error: Uncaught TypeError: ui is undefined when running this file in browser
File:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bla</title>
<link rel="stylesheet" href="styles/jquery-ui.css">
<style>
#outer {
/* position: relative; */
width: 60%;
height: 700px;
background-color:cornflowerblue;
text-align: center;
margin: 0 auto;
}
li {
/* position:relative; */
margin: 0;
padding: 0;
background-color: pink;
}
.inner {
/* position: relative; */
margin: 0;
padding: 0;
background-color:darkgoldenrod;
height: 5em;
}
#sortable {
list-style-type: none;
}
p {
margin: 0;
padding: 0;
}
.tilt {
background-color:lightslategrey;
transform: rotate(5);
}
</style>
</head>
<body>
<div id="outer">
<ul id="sortable">
<!-- <li> -->
<div class="inner"><p>hello 1</p></div>
<!-- </li> -->
<li class="ui-state-default">
<div class="inner"><p>hello 2</p></div>
</li>
<li class="ui-state-default">
<div class="inner"><p>hello 2e</p></div>
</li>
<li class="ui-state-default">
<div class="inner"><p>hello 4</p></div>
</li>
</ul>
</div>
<button id="lebutton">Save</button>
<script src="scripts/jquerymin.js" type="text/javascript"></script>
<script src="scripts/jquery-ui.min.js"></script>
<script>
$(function() {
$('#sortable').sortable();
$('#sortable').disableSelection();
$('#lebutton').on('click', function(e) {
e.preventDefault();
let childrens = $('#sortable').children();
childrens.each(function(index, elem) {
console.log(index + ": " + elem.textContent);
});
});
});
$('#sortable').sortable({
handle: function(event, ui) {
$(ui.item).addClass("tilt");
console.log('handle')
},
stop: function(event, ui) {
$(ui.item).removeClass("tilt");
console.log('stop');
},
});
</script>
</body>
</html>
I read the documentation for JQuery UI, and I thought one could select the item that is dragged in sortable by ui.item like $(ui.item)
I tried the example select statements from these places:
drag event for jquery-ui-sortable
Add and remove a class on click using jQuery?
jQuery Sortable - How to get current dragged element attribute
$('#'+ui.item[0].id).removeClass("ui-state-default"); from this answer:
https://stackoverflow.com/a/1931019/7989121
and ui.helper.addClass('red'); from this answer:
https://stackoverflow.com/a/25018112/7989121
What am I doing wrong?

According to the jQuery UI documentation handle
is not a function type, so you cannot pass event and ui to it.
Correct me if I'm wrong but I assume you want to add a class to the item that is being selected (.tilt) and then when the item is dropped in its new position, the class is removed...correct?
Remove the $("#sortable").sortable() line because you are calling this in the other function
Put your other "sortable" function inside the jQuery $(function()
Change handle to activate
Use ui.item to access the element.
$(function() {
$('#sortable').sortable({
activate: function(event, ui) {
ui.item.addClass("tilt");
},
stop: function(event, ui) {
ui.item.removeClass("tilt");
}
});
$('#sortable').disableSelection();
$('#lebutton').on('click', function(e) {
e.preventDefault();
let childrens = $('#sortable').children();
childrens.each(function(index, elem) {
console.log(index + ": " + elem.textContent);
});
});
});
#outer {
/* position: relative; */
width: 60%;
height: 700px;
background-color:cornflowerblue;
text-align: center;
margin: 0 auto;
}
li {
/* position:relative; */
margin: 0;
padding: 0;
background-color: pink;
}
.inner {
/* position: relative; */
margin: 0;
padding: 0;
background-color:darkgoldenrod;
height: 5em;
}
#sortable {
list-style-type: none;
}
p {
margin: 0;
padding: 0;
}
.tilt {
background-color:lightslategrey;
transform: rotate(5) !important;
}
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="outer">
<ul id="sortable">
<!-- <li> -->
<div class="inner"><p>hello 1</p></div>
<!-- </li> -->
<li class="ui-state-default">
<div class="inner"><p>hello 2</p></div>
</li>
<li class="ui-state-default">
<div class="inner"><p>hello 2e</p></div>
</li>
<li class="ui-state-default">
<div class="inner"><p>hello 4</p></div>
</li>
</ul>
</div>
<button id="lebutton">Save</button>

Stuck on navbar function

I am trying to create collapsed navbar I did the HTML and CSS part but when I do the javascript part it gives me an uncaught reference error. My code is below I provided the HTML CSS and Javascript. I would appreciate it if someone can please help. Thank you in advance. I provided all the code below.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,300;1,100&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <header>
      <img src="logo/logo.png" alt="" />
      <div class="container" onclick="btnOpen()">
        <div class="line-1"></div>
        <div class="line-2"></div>
        <div class="line-3"></div>
      </div>
      <nav>
        <ul>
          <a href="javascript:void(0)" class="closebtn" onclick="closeNav()"
            >×</a
          >
          <li><a href="index.html">Home</a></li>
          <li><a href="pages/about.html">About us</a></li>
          <li><a href="pages/contact.html">How to reach me</a></li>
          <li><a href="pages/portfolio.html">Portfolio</a></li>
        </ul>
      </nav>
      <section class="sm">
        <a href="#"><i class="fab fa-facebook-f" class="facebook"></i></a>
        <a href="#"><i class="fab fa-twitter" class="twitter"></i></a>
        <a href="#"><i class="fab fa-google" class="google"></i></a>
      </section>
      <main></main>
      <section></section>
      <footer></footer>
    </header>
  </body>
  <script src="js/script.js"></script>
  <script
    src="https://kit.fontawesome.com/dd4d991431.js"
    crossorigin="anonymous"
  ></script>
</html>
* {
  box-sizing: border-box;
}
header {
  width: 100%;
  background-color: #e1e1e1;
}
header img {
  width: 100px;
  height: 100px;
}
header .container {
  display: inline-block;
  float: right;
}
.container .line-1,
.line-2,
.line-3 {
  width: 35px;
  height: 5px;
  background-color: #111;
  margin: 6px 0;
}
nav {
  display: flex;
  position: absolute;
  top: 100;
  right: 0;
  background-color: #e1e1e1;
  width: 40vw;
  height: 30vh;
}
nav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
  text-decoration: none;
  color: #111;
}
nav ul {
  display: flex;
  flex-direction: column;
  align-items: center;
}
nav ul li {
  margin: 10px;
}
nav ul li a {
  text-decoration: none;
  color: #111;
  font-style: bold;
  font-weight: 600;
  font-size: 15px;
  font-family: Roboto;
}
function openBtn() {
  document.getElementsByName("nav").style.width = "40vw";
  document.getElementsByName("nav").style.height = "30vh";
}
openBtn();
function closeNav() {
  document.getElementsByName("nav").style.width = "0";
  document.getElementsByName("nav").style.height = "0";
}
closeNav();

I have added Id to nav and corrected js. Please review.
function btnOpen() {
document.getElementById("nav").style.width = "40vw";
document.getElementById("nav").style.height = "30vh";
}
btnOpen();
function closeNav() {
document.getElementById("nav").style.width = "0";
document.getElementById("nav").style.height = "0";
}
closeNav();
* {
box-sizing: border-box;
}
header {
width: 100%;
background-color: #e1e1e1;
}
header img {
width: 100px;
height: 100px;
}
header .container {
display: inline-block;
float: right;
}
.container .line-1,
.line-2,
.line-3 {
width: 35px;
height: 5px;
background-color: #111;
margin: 6px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,300;1,100&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<header>
<img src="logo/logo.png" alt="" />
<div class="container" onclick="btnOpen()">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
</div>
<nav id='nav'>
<ul>
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()"
>×</a
>
<li>Home</li>
<li>About us</li>
<li>How to reach me</li>
<li>Portfolio</li>
</ul>
</nav>
<section class="sm">
<i class="fab fa-facebook-f" class="facebook"></i>
<i class="fab fa-twitter" class="twitter"></i>
<i class="fab fa-google" class="google"></i>
</section>
<main></main>
<section></section>
<footer></footer>
</header>
</body>
<script src="js/script.js"></script>
<script
src="https://kit.fontawesome.com/dd4d991431.js"
crossorigin="anonymous"
></script>
</html>

A couple things need to be fixed, and you don't need any external libraries to do so. First, you have a syntax error on your first div. Your onclick attribute should point to the function openBtn(), not btnOpen().
Secondly, your reference error stemmed from your two functions, openBtn() and closeNav(). When you called document.getElementsByName('nav') you cannot edit the style properties of a NodeList, which is what was being returned. Here's what I changed.
const navs = document.getElementsByTagName("nav")
function openBtn() {
for (const nav of navs) {
nav.style.width = "40vw"
nav.style.height = "30vh"
}
}
openBtn()
function closeNav() {
for (const nav of navs) {
nav.style.width = "0"
nav.style.height = "0"
}
}
closeNav()
By using a for-of loop, you can edit each nav element in the HTMLCollection returned by document.getElementsByTagName('nav').
Here's a working example.
const navs = document.getElementsByTagName("nav")
function openBtn() {
for (const nav of navs) {
nav.style.width = "40vw"
nav.style.height = "30vh"
}
}
openBtn()
function closeNav() {
for (const nav of navs) {
nav.style.width = "0"
nav.style.height = "0"
}
}
* {
box-sizing: border-box;
}
header {
width: 100%;
background-color: #e1e1e1;
}
header img {
width: 100px;
height: 100px;
}
header .container {
display: inline-block;
float: right;
}
.container .line-1,
.line-2,
.line-3 {
width: 35px;
height: 5px;
background-color: #111;
margin: 6px 0;
}
nav {
display: flex;
position: absolute;
top: 100;
right: 0;
background-color: #e1e1e1;
width: 40vw;
height: 30vh;
}
nav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
text-decoration: none;
color: #111;
}
nav ul {
display: flex;
flex-direction: column;
align-items: center;
}
nav ul li {
margin: 10px;
}
nav ul li a {
text-decoration: none;
color: #111;
font-style: bold;
font-weight: 600;
font-size: 15px;
font-family: Roboto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,300;1,100&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<header>
<img src="logo/logo.png" alt="" />
<div class="container" onclick="openBtn()">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
</div>
<nav>
<ul>
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()"
>×</a
>
<li>Home</li>
<li>About us</li>
<li>How to reach me</li>
<li>Portfolio</li>
</ul>
</nav>
<section class="sm">
<i class="fab fa-facebook-f" class="facebook"></i>
<i class="fab fa-twitter" class="twitter"></i>
<i class="fab fa-google" class="google"></i>
</section>
<main></main>
<section></section>
<footer></footer>
</header>
</body>
<script src="js/script.js"></script>
<script
src="https://kit.fontawesome.com/dd4d991431.js"
crossorigin="anonymous"
></script>

Ajax call not loading the pages on the main page

I try to load different pages using an ajax call. But the pages are not appearing on the main page.
This is the file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>News Headlines</title>
<script src="Scripts/jquery.min.js"></script>
<link href="Content/site.css" rel="stylesheet">
<style>
#newslinks li {
display: inline-block;
margin-right: 20px;
}
#newslinks li a {
padding: 5px 10px;
background-color: white;
color: black !important;
text-decoration: none;
}
#newslinks li a:hover {
background-color: rgb(110,138,195);
color: white !important;
}
#headlines #newsItem {
margin-top: 10px;
padding: 20px;
border: 1px solid white;
}
</style>
<script>
$(document).ready(function() {
$('#newslinks a').click(function () {
var url = $(this).attr('href');
$('#healines').load(url + ' #newsItem');
//evt.pr.preventDefault();
return false;
});
}); // end ready
</script>
</head>
<body>
<div class="wrapper">
<header>
JAVASCRIPT <span class="amp">&</span> jQUERY: THE MISSING MANUAL
</header>
<div class="content">
<div class="main">
<h1>News Headlines</h1>
<ul id="newslinks">
<li>Today’s News</li>
<li>Yesterday’s News</li>
<li>Last Week’s News</li>
</ul>
<div id="headlines"></div>
</div>
</div>
<footer>
<p>JavaScript & jQuery: The Missing Manual, 3rd Edition, by David McFarland. Published by O'Reilly Media, Inc.</p>
</footer>
</div>
</body>
</html>
So you see three links. But if you click on one of the links nothing happens. I am using IIS. And yes it is enabled.
Thank you

Misspelled headlines in $('#healines').load(url + ' #newsItem');.

How do i make my nav bar transparent when I scroll down and come back when I scroll up or when I hover my mouse over is?

How do i make my nav bar transparent when I scroll down and come back when I scroll up or when I hover my mouse over it? I tride to do this with jquery but i didn't really work.
Here's My HTML and CSS:
<DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="LunchWebsiteCSS.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).scroll(
{
previousTop: 0
},
function () {
var currentTop = $(window).scrollTop();
if (currentTop < this.previousTop) {
//$(".sidebar em").text("Up"); /* optional for demo */
$(".nav").css({ opacity: 0.5 });
} else {
//$(".sidebar em").text("Down");
$(".nav").css({ opacity: 0 });
}
this.previousTop = currentTop;
});
});
</script>
<script src="js/jjquery.js"></script>
</head>
<body>
<div class="nav">
<ul>
<div class="btn-group">
<li>Browse
</li>
<li>Sign Up
</li>
<li>BHS Lunch</li>
<li>Log In
</li>
<li>Help
</li>
</div>
</ul>
</div>
</body>
.nav {
height: 35px;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
width: 100%;
/*border: 1px solid black;*/
/*background-color: #AA3C39;*/
background-color: #AA3C39;
/*opacity: 0.7;*/
position: fixed;
}

This is how you can do it.
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop()>100)
$(".nav").css({"background-color" : "rgba(0,0,0,.5)"});
else
$(".nav").css({"background-color" : "rgba(0,0,0,1)"});
});
});
Use CSS to see it back on hover
.nav:hover
{
background-color:rgba(0,0,0,1);
}

Categories

Resources