CODEWITHSUNDEEP
javascriptjqueryhtmlcss
LCTS
LCTS

Reputation: 286

Span element does not run the animation from jQuery

I am trying to make a menu appear from right side by jQuery animation by clicking on a span which have runmenu class but it does not work , I made the same class for a button and it worked fine , what is the problem here and why it works for button only?!

$(document).ready(function() {
  $(".runmenu").click(function() {
    $(".menu").animate({
      "right": 0
    }, 1000);
  });
});
/* Global*/

.conatianer {
  width: 1026.66px;
}
/*End global*/

/*Start navbar*/

.navbar {
  position: relative;
  background: url(http://vividmarketinginc.com/wp-content/uploads/2015/08/1672___selected7.jpg);
  background-size: cover;
  height: 700.531px;
  overflow: hidden;
}
.navbar .menu {
  position: absolute;
  right: -200px;
  width: 200px;
  height: 700px;
  background-color: gray;
  color: white;
}
.navbar .overlay {
  position: absolute;
  background-color: rgba(0, 0, 0, .2);
  width: 100%;
  height: 700.531px;
  z-index: 1;
}
.navbar .navbar_one,
.navbar .navbar_two {
  position: relative;
  z-index: 2;
}
.navbar .navbar_one h3 {
  float: left;
  margin-top: 0;
  color: #FFF;
  padding: 20px;
  text-transform: capitalize;
}
.navbar .navbar_one div {
  float: right;
  margin-right: 10px;
  color: #FFF;
  padding: 20px;
}
.navbar .navbar_two {
  text-align: center;
  padding-top: 230px;
}
.navbar .navbar_two i {
  color: #FFF
}
.navbar .navbar_two h1 {
  text-transform: capitalize;
  color: #FFF;
}
.navbar .navbar_two h3 {
  text-transform: capitalize;
  color: #FFF
}
.navbar .navbar_two ul {
  list-style: none;
}
.navbar .navbar_two ul li {
  width: 110px;
  background-color: rgba(81, 186, 164, .8);
  -webkit-border-radius: 25px;
  -moz-border-radius: 10px;
  border-radius: 25px;
  text-align: center;
  color: #FFF;
  font-family: Arial;
  font-size: 20px;
  font-weight: 600;
  line-height: 10px;
  cursor: pointer;
  padding: 20px 25px;
  margin-left: 555px;
}
.navbar .navbar_two ul li:hover {
  background-color: #51baa4;
}
.navbar .navbar_two ul li a {
  color: #FFF;
  text-decoration: none
}
/*End navbar*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Template retrospect</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="css/StyleSheet.css" />
  <link rel="stylesheet" href="css/font-awesome.min.css" />
  <link rel="stylesheet" href="css/normalize.css" />

</head>

<body>
  <!--Start NavBar-->
  <div class="navbar">
    <div class="menu">
      <!--Menu -->
      <i class="fa fa-long-arrow-right"></i>
      <ul>
        <li>home</li>
        <li>generic</li>
        <li>elements</li>
      </ul>
    </div>
    <div class="overlay"></div>
    <div class="navbar_one">
      <h3>retrospect</h3>
      <div>
        <i class="fa fa-bars fa-lg"></i>
        <span class="runmenu">menu</span> 
      </div>
    </div>
    <div class="navbar_two">
      <i class="fa fa-soundcloud fa-4x"></i>
      <h1>etiam adipiscing</h1>
      <h3>magna feugiat lorem dolor egetas</h3>
      <ul>
        <li><a href="#" class="runmenu">learn more </a>
        </li>
      </ul>
    </div>

  </div>
  <script src="js/jquery-1.11.3.min.js"></script>
  <script src="js/JavaScript.js"></script>
</body>

</html>

Upvotes: 6

Views: 173

Answers (2)

Jinu Kurian
Jinu Kurian

Reputation: 9426

It's all about z-index property and nothing wrong in your javascript. Your span.runmenu wasn't clickable because the navbar2 block was positioned over the span. Change the css and get the problem resolved.

give 

.runmenu {
  z-index: 999;
  cursor: pointer;
}

.navbar .navbar_two {
  z-index: 0;
}

See the fiddle

Preview

$(document).ready(function() {
  $('span.runmenu').click(function() {
    console.log("ok");
    $(".menu").animate({
      "right": 0
    }, 1000);
  });
});
/* Global*/

.runmenu {
  z-index: 999;
  cursor: pointer;
}
.conatianer {
  width: 1026.66px;
}
/*End global*/

/*Start navbar*/

.navbar {
  position: relative;
  background: url(http://vividmarketinginc.com/wp-content/uploads/2015/08/1672___selected7.jpg);
  background-size: cover;
  height: 700.531px;
  overflow: hidden;
}
.navbar .menu {
  position: absolute;
  right: -200px;
  width: 200px;
  height: 700px;
  background-color: gray;
  color: white;
}
.navbar .overlay {
  position: absolute;
  background-color: rgba(0, 0, 0, .2);
  width: 100%;
  height: 700.531px;
  z-index: 1;
}
.navbar .navbar_one,
.navbar .navbar_two {
  position: relative;
  z-index: 2;
}
.navbar .navbar_one h3 {
  float: left;
  margin-top: 0;
  color: #FFF;
  padding: 20px;
  text-transform: capitalize;
}
.navbar .navbar_one div {
  float: right;
  margin-right: 10px;
  color: #FFF;
  padding: 20px;
}
.navbar .navbar_two {
  text-align: center;
  padding-top: 230px;
  z-index: 0;
}
.navbar .navbar_two i {
  color: #FFF
}
.navbar .navbar_two h1 {
  text-transform: capitalize;
  color: #FFF;
}
.navbar .navbar_two h3 {
  text-transform: capitalize;
  color: #FFF
}
.navbar .navbar_two ul {
  list-style: none;
}
.navbar .navbar_two ul li {
  width: 110px;
  background-color: rgba(81, 186, 164, .8);
  -webkit-border-radius: 25px;
  -moz-border-radius: 10px;
  border-radius: 25px;
  text-align: center;
  color: #FFF;
  font-family: Arial;
  font-size: 20px;
  font-weight: 600;
  line-height: 10px;
  cursor: pointer;
  padding: 20px 25px;
  margin-left: 555px;
}
.navbar .navbar_two ul li:hover {
  background-color: #51baa4;
}
.navbar .navbar_two ul li a {
  color: #FFF;
  text-decoration: none
}
/*End navbar*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<body>
  <!--Start NavBar-->
  <div class="navbar">
    <div class="menu">
      <!--Menu -->
      <i class="fa fa-long-arrow-right"></i>
      <ul>
        <li>home</li>
        <li>generic</li>
        <li>elements</li>
      </ul>
    </div>
    <div class="overlay"></div>
    <div class="navbar_one">
      <h3>retrospect</h3>
      <div>
        <i class="fa fa-bars fa-lg"></i>
        <span class="runmenu">menu</span>
      </div>
    </div>
    <div class="navbar_two">
      <i class="fa fa-soundcloud fa-4x"></i>
      <h1>etiam adipiscing</h1>
      <h3>magna feugiat lorem dolor egetas</h3>
      <ul>
        <li><a href="#" class="runmenu">learn more </a>
        </li>
      </ul>
    </div>

Upvotes: 6

PlayerWet
PlayerWet

Reputation: 419

I did the same a few months ago, the best way is to insert the span inside a div and encourage div.

 $(".animamenu").click(function () {

        $(".animamenu").animate({
            "right": 0
        }, 1000);
    });

html:

<div>
      <i class="fa fa-bars fa-lg"></i>
    <div class="animamenu">
       <span class="runmenu">menu</span> 
    </div>
</div>

Upvotes: -1

Related Questions