Jquery切换效果不起作用

时间：2017-06-23 12:45:50

标签： jquery onclick toggle

我有一个div图标，我想在点击上面的img时放下。我已经在#mainicons div上设置了jquery切换效果并且它无法正常工作，这就是一个小问题。这可能是因为它是容器，而不是每个图标（<a>或<i>元素）。但这实际上是我希望整个div只是下降的效果，而不是每个单独的图标。那么有办法做到这一点还是不可能？

＆＃13;
＆＃13; 
// Show hide on click

    function showNavi(){
        $("#navigationin").toggle('slow','swing');
      $('#chevron').toggleClass('rotate180');
      $('.rainbow').toggleClass('changecolor');
    };
// Scroll to top
	//Check to see if the window is top if not then display button
	$(window).scroll(function(){
		if ($(this).scrollTop() > 100) {
			$('.scrolltotop').fadeIn();
		} else {
			$('.scrolltotop').fadeOut();
		}
	});
	
	//Click event to scroll to top
	$('.scrolltotop').click(function(){
		$('html, body').animate({scrollTop : 0},800);
		return false;
	});

// Random color
function entryOver(classnm) {
    $(classnm).css('border-color',randomColor({
   luminosity: 'bright',
   format: 'hsl' 
}))
};
function notEntryOver(classnm) {
    $(classnm).css('border-color',"#dadada")
};

// Icons drop down
function iconsFunction() {
  $('#mainicons').toggle("blind");
  $('#avatar i').toggleClass('rotateavatar');
};

  $( function() {
    $( ".about" ).draggable({cursor: "move"});
  } );
＆＃13; 
a{
  text-decoration:none
}
/*-- PAGINATION --*/

.pagination {
  margin-top:10px;
  text-align:center;
}
   
.pagination a {
margin-bottom:10px;
color:#fff;
background-color:#bababa;
display: inline-block;
width: 20px;
height: 20px;
text-align: center;
border-radius: 100%;
line-height: 20px;
    margin-left:5px;
}
   
.pagination a:hover {
color:#58acfa;
background:#fff;
}

.current_page{
color:#58acfa;
border:1px solid #58acfa;
margin-bottom:10px;
display: inline-block;
width: 20px;
height: 20px;
text-align: center;
border-radius: 100%;
line-height: 20px;
    margin-left:5px;
}

    /*----- MAIN CONTAINER -----*/

#container {
position: relative;
left: 0;
right: 0;
}


  /*------ MENU -----*/
  .about{
    cursor:move;
    z-index:1000;
    position:fixed;
    width:300px;
    margin: 0 auto;
    border-radius:5px;
    border:1px solid #bababa;
    background:white;
    -webkit-transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    transition: .5s ease;
  }


  /* Main icons */

  #mainicons {
    position: absolute;
    top: 65px;
    left: 23px;
    text-align: center;
    opacity:1;
    -webkit-transition: all .7s ease;
    -moz-transition: all .7s ease;
    -o-transition: all .7s ease;
    transition: all .7s ease;
  }

#mainicons>a {
margin-top: 10px;
display: flex;
justify-content: center;
align-items: center;
}

  #mainicons i {
    display: block;
    height: 20px;
    width: 20px;
    padding: 10px;
    color: #fff;
    background: #bababa;
    border-radius:100%;
    font-size: 16px;
    line-height: 20px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
  }

  #mainicons i:hover {
      background:#fff;
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  
  #mainicons .fa-home:hover{
      color:red;
  }
  #mainicons .fa-comment:hover{
      color:#fe9a2e;
  }
  #mainicons .fa-download:hover{
      color:#37ce00;
  }
  #mainicons .fa-address-card:hover{
      color:#58acfa;
  }

  /* Avatar */

  #avatar {
    position:absolute;
    cursor:pointer;
    overflow:hidden;
    border-radius:100%;
    border:3px solid #dadada;
    margin:10px 0 0 13px;
    width: 55px;
    height: 55px;
    z-index:10;
  }

  #avatar img {
    width: 100%;
    height: 100%;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
  }
  
  #avatar i{
      position:absolute;
      left:0;
      width:100%;
      height:100%;
      font-size:17px;
      line-height:55px;
      text-align:center;
      color:#bababa;
      opacity:0;
      background:#fff;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
  }
  
  #avatar:hover i{
      opacity:1;
  }
  
  .rotateavatar{
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);      
  }
  /* Description */

  #description {
    position: relative;
    overflow:hidden;
    margin:10px 0 10px 90px;
    color: #000;
    background: #dadada;
    padding: 2px 10px 2px 10px;
    width:180px;
    font-size: 13px;
    font-family: Helvetica, Arial, sans-serif;
    line-height: 18px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }

  .rainbow {
      position:absolute;
      width:200%;
      height:2px;
      top:0;
      left:0;
      opacity:0.5;
    border-radius:5px 5px 0 0;
  background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
     -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -ms-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;
    transition: all 0.7s ease;  
}

.rainbow.changecolor{
      -ms-transform: translate(-50%); /* IE 9 */
    -webkit-transform: translate(-50%); /* Safari */
    transform: translate(-50%);
}
  
  /* Search box */

  #search {
    margin:10px auto 10px auto;
    width: 150px;
    height: 25px;
    overflow: hidden;
    color: #404040;
    background: #fff;
    border:1px solid black;
  }
  
  #search .fa-search{
      font-size:12px!important;
      float:right;
      margin-right:5px;
      line-height:25px;
  }

  /* Navigation */

#description .fa-chevron-down{
    cursor:pointer;
    font-size:12px;
    display:flex;
    justify-content:center;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}
#description .fa-chevron-down:hover{
    color:#58acfa;
}
.rotate180{
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);  
}

#navigationin i {
    display: inline-block;
    color: #404040!important;
    font-size: 15px;
    margin:5px 6px 5px 6px;
    padding:3px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
  }
  #navigationin i:hover {
-webkit-transform : rotate(360deg);
-moz-transform : rotate(360deg);
-ms-transform : rotate(360deg);
-o-transform : rotate(360deg);
transform : rotate(360deg);
  }
   #navigationin .fa-question-circle:hover{
      color:red!important;
  }
  #navigationin .fa-link:hover{
      color:#fe9a2e!important;
  }
  #navigationin .fa-music:hover{
      color:#ffde07!important;
  }
  #navigationin .fa-user-circle-o:hover{
      color:#37ce00!important;
  }
＆＃13; 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/randomcolor/0.5.2/randomColor.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">


<div id="container">
  
<div class="about" onmouseover="entryOver(this)" onmouseout="notEntryOver(this)">


<div id="avatar" onclick="iconsFunction(this)"><img src="http://static.tumblr.com/5c231601a0942f139489cca966931eef/4cxodkk/AOSorhvq1/tumblr_static_dpxyh4zatkgsocg4888kg8wg8.png"><i class="fa fa-arrow-down"></i></div>

<div id="description">
<span class="rainbow"></span>
<p>Welcome to <font color="#58acfa">actorsblog</font>!</p>
<p>Here you will find all sorts of fandom <b>pictures</b>, <b>icons</b> and <b>edits</b>!</p>
<p>If you have a question, a  request or a post to submit, <b>click the avatar</b>!</p>
  <i class="fa fa-chevron-down" id="chevron" onclick="showNavi()"></i>
      <div id="navigationin" hidden>
    <center>
    <a href="{text:Link One Url}" title="{text:Link One Title}"><i class="fa fa-question-circle"></i></a>
    <a href="{text:Link Two Url}" title="{text:Link Two Title}"><i class="fa fa-link"></i></a>
    <a href="{text:Link Three Url}" title="{text:Link Three Title}"><i class="fa fa-music"></i></a>
    <a href="{text:Link Four Url}" title="{text:Link Four Title}"><i class="fa fa-user-circle-o"></i></a>
    </center>
    </div>
    <!--End navigationin-->
    <div id="search">
    <form action="/search" method="get">
    <input type="text" name="q" value="SEARCH" style="position:absolute; width:120px;     line-height:25px; padding-left:10px; font-family:{select:Body font}; font-size: 12px;      background:transparent; border:1px solid transparent; color:"#404040";"/>
    <i class="fa fa-search" type="submit"></i>
    </form>
    </div>
</div>
  
  <div id="mainicons" hidden>
<a href="/" title="home"><i class="fa fa-home"></i></a>
<a href="/ask" title="contact"><i class="fa fa-comment"></i></a>
<a href="/submit" title="sumbit"><i class="fa fa-download"></i></a>
<a href="/about" title="about"><i class="fa fa-address-card"></i></a>
</div>
<!--End mainicons-->

<div class="pagination">
<a href="{PreviousPage}">←</a>

<span class="current_page">1</span>

<a class="jump_page" href="{URL}">2</a>

<a href="{NextPage}">→</a>

</div>
<!--End pager-->

</div><!--End about--> 
</div>
＆＃13;
＆＃13;
＆＃13;

感谢您的回答！如果你想要here's代码，也可以。

1 个答案:

答案 0 :(得分：1)

我建议使用jQuery .slideToggle('slow');而不是.toggle('slow','swing');。它基本上会做同样的事情，但它会向下滑动而不是从左向右滑动。 jQuery .toggle(); 假设从左到右

＆＃13;
＆＃13; 
// Show hide on click

function showNavi() {
  $("#navigationin").slideToggle('slow');
  $('#chevron').toggleClass('rotate180');
  $('.rainbow').toggleClass('changecolor');
};
// Scroll to top
//Check to see if the window is top if not then display button
$(window).scroll(function() {
  if ($(this).scrollTop() > 100) {
    $('.scrolltotop').fadeIn();
  } else {
    $('.scrolltotop').fadeOut();
  }
});

//Click event to scroll to top
$('.scrolltotop').click(function() {
  $('html, body').animate({
    scrollTop: 0
  }, 800);
  return false;
});

// Random color
function entryOver(classnm) {
  $(classnm).css('border-color', randomColor({
    luminosity: 'bright',
    format: 'hsl'
  }))
};

function notEntryOver(classnm) {
  $(classnm).css('border-color', "#dadada")
};

// Icons drop down
function iconsFunction() {
  $('#mainicons').slideToggle('slow');
  $('#avatar i').toggleClass('rotateavatar');
};

$(function() {
  $(".about").draggable({
    cursor: "move"
  });
});
＆＃13; 
a {
  text-decoration: none
}


/*-- PAGINATION --*/

.pagination {
  margin-top: 10px;
  text-align: center;
}

.pagination a {
  margin-bottom: 10px;
  color: #fff;
  background-color: #bababa;
  display: inline-block;
  width: 20px;
  height: 20px;
  text-align: center;
  border-radius: 100%;
  line-height: 20px;
  margin-left: 5px;
}

.pagination a:hover {
  color: #58acfa;
  background: #fff;
}

.current_page {
  color: #58acfa;
  border: 1px solid #58acfa;
  margin-bottom: 10px;
  display: inline-block;
  width: 20px;
  height: 20px;
  text-align: center;
  border-radius: 100%;
  line-height: 20px;
  margin-left: 5px;
}


/*----- MAIN CONTAINER -----*/

#container {
  position: relative;
  left: 0;
  right: 0;
}


/*------ MENU -----*/

.about {
  cursor: move;
  z-index: 1000;
  position: fixed;
  width: 300px;
  margin: 0 auto;
  border-radius: 5px;
  border: 1px solid #bababa;
  background: white;
  -webkit-transition: .5s ease;
  -moz-transition: .5s ease;
  -o-transition: .5s ease;
  transition: .5s ease;
}


/* Main icons */

#mainicons {
  position: absolute;
  top: 70px;
  left: 23px;
  text-align: center;
  opacity: 1;
  -webkit-transition: transform .7s ease;
  -moz-transition: transform .7s ease;
  -o-transition: transform .7s ease;
  transition: transform .7s ease;
}

#mainicons i {
  display: block;
  margin-top: 5px;
  height: 20px;
  width: 20px;
  padding: 10px;
  color: #fff;
  background: #bababa;
  border-radius: 100%;
  font-size: 16px;
  line-height: 20px;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

#mainicons i:hover {
  background: #fff;
  -ms-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}

#mainicons .fa-home:hover {
  color: red;
}

#mainicons .fa-comment:hover {
  color: #fe9a2e;
}

#mainicons .fa-download:hover {
  color: #37ce00;
}

#mainicons .fa-address-card:hover {
  color: #58acfa;
}


/* Avatar */

#avatar {
  position: absolute;
  cursor: pointer;
  overflow: hidden;
  border-radius: 100%;
  border: 3px solid #dadada;
  margin: 10px 0 0 13px;
  width: 55px;
  height: 55px;
  z-index: 10;
}

#avatar img {
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -ms-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
}

#avatar i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 17px;
  line-height: 55px;
  text-align: center;
  color: #bababa;
  opacity: 0;
  background: #fff;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -ms-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
}

#avatar:hover i {
  opacity: 1;
}

.rotateavatar {
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}


/* Description */

#description {
  position: relative;
  overflow: hidden;
  margin: 10px 0 10px 90px;
  color: #000;
  background: #dadada;
  padding: 2px 10px 2px 10px;
  width: 180px;
  font-size: 13px;
  font-family: Helvetica, Arial, sans-serif;
  line-height: 18px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.rainbow {
  position: absolute;
  width: 200%;
  height: 2px;
  top: 0;
  left: 0;
  opacity: 0.5;
  border-radius: 5px 5px 0 0;
  background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2), color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22));
  background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2), color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22));
  -webkit-transition: all 0.7s ease;
  -moz-transition: all 0.7s ease;
  -ms-transition: all 0.7s ease;
  -o-transition: all 0.7s ease;
  transition: all 0.7s ease;
}

.rainbow.changecolor {
  -ms-transform: translate(-50%);
  /* IE 9 */
  -webkit-transform: translate(-50%);
  /* Safari */
  transform: translate(-50%);
}


/* Search box */

#search {
  margin: 10px auto 10px auto;
  width: 150px;
  height: 25px;
  overflow: hidden;
  color: #404040;
  background: #fff;
  border: 1px solid black;
}

#search .fa-search {
  font-size: 12px!important;
  float: right;
  margin-right: 5px;
  line-height: 25px;
}


/* Navigation */

#description .fa-chevron-down {
  cursor: pointer;
  font-size: 12px;
  display: flex;
  justify-content: center;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

#description .fa-chevron-down:hover {
  color: #58acfa;
}

.rotate180 {
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

#navigationin i {
  display: inline-block;
  color: #404040!important;
  font-size: 15px;
  margin: 5px 6px 5px 6px;
  padding: 3px;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

#navigationin i:hover {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
}

#navigationin .fa-question-circle:hover {
  color: red!important;
}

#navigationin .fa-link:hover {
  color: #fe9a2e!important;
}

#navigationin .fa-music:hover {
  color: #ffde07!important;
}

#navigationin .fa-user-circle-o:hover {
  color: #37ce00!important;
}
＆＃13; 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/randomcolor/0.5.2/randomColor.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">


<div id="container">

  <div class="about" onmouseover="entryOver(this)" onmouseout="notEntryOver(this)">


    <div id="avatar" onclick="iconsFunction(this)"><img src="http://static.tumblr.com/5c231601a0942f139489cca966931eef/4cxodkk/AOSorhvq1/tumblr_static_dpxyh4zatkgsocg4888kg8wg8.png"><i class="fa fa-arrow-down"></i></div>

    <div id="description">
      <span class="rainbow"></span>
      <p>Welcome to
        <font color="#58acfa">actorsblog</font>!</p>
      <p>Here you will find all sorts of fandom <b>pictures</b>, <b>icons</b> and <b>edits</b>!</p>
      <p>If you have a question, a request or a post to submit, <b>click the avatar</b>!</p>
      <i class="fa fa-chevron-down" id="chevron" onclick="showNavi()"></i>
      <div id="navigationin" hidden>
        <center>
          <a href="{text:Link One Url}" title="{text:Link One Title}"><i class="fa fa-question-circle"></i></a>
          <a href="{text:Link Two Url}" title="{text:Link Two Title}"><i class="fa fa-link"></i></a>
          <a href="{text:Link Three Url}" title="{text:Link Three Title}"><i class="fa fa-music"></i></a>
          <a href="{text:Link Four Url}" title="{text:Link Four Title}"><i class="fa fa-user-circle-o"></i></a>
        </center>
      </div>
      <!--End navigationin-->
      <div id="search">
        <form action="/search" method="get">
          <input type="text" name="q" value="SEARCH" style="position:absolute; width:120px;     line-height:25px; padding-left:10px; font-family:{select:Body font}; font-size: 12px;      background:transparent; border:1px solid transparent; color:" #404040 ";"/>
          <i class="fa fa-search" type="submit"></i>
        </form>
      </div>
    </div>

    <div id="mainicons" hidden>
      <a href="/" title="home"><i class="fa fa-home"></i></a>
      <a href="/ask" title="contact"><i class="fa fa-comment"></i></a>
      <a href="/submit" title="sumbit"><i class="fa fa-download"></i></a>
      <a href="/about" title="about"><i class="fa fa-address-card"></i></a>
    </div>
    <!--End mainicons-->

    <div class="pagination">
      <a href="{PreviousPage}">←</a>

      <span class="current_page">1</span>

      <a class="jump_page" href="{URL}">2</a>

      <a href="{NextPage}">→</a>

    </div>
    <!--End pager-->

  </div>
  <!--End about-->
</div>
＆＃13;
＆＃13;
＆＃13;

P.S。当你点击头像有四个选项。他们中的一个有一个错字......它已经提交了＆＃39;不是＆＃39; sumbit＆＃39;

编辑：

问题仍然存在，因此您还需要将transition: all .7s ease更改为transition: transform .7s ease。当图标悬停在上面时，它会被赋予CSS变换旋转等。您只需要将.7s应用于变换，而不是全部（包括slideToggle）

相关问题
最新问题