堆栈内存溢出
  简体   繁体   English

单击时无法执行旋转

[英]Can't perform rotate on click

 原文  2020-04-05 09:15:05  2   2    javascript/ jquery/ html/ css

问题描述

this is my very first post so please tell me if I'd commit any mistake.这是我的第一篇文章，所以如果我犯了任何错误，请告诉我。 Started learning html and css just a week ago for a personal project web and been having difficulties trying to apply javascript functions to my menus.一周前开始学习 html 和 css 个人项目 web 并且在尝试将 ZDE9B9ED708D7E2E2EZEE 功能应用到 my708D7E919ZEE 时遇到困难。 The point: I'm making a contact footer with a slide on click.要点：我正在制作一个带有点击幻灯片的联系页脚。 It has an up arrow next to the word 'contacto' (contact).它在单词“contacto”（联系人）旁边有一个向上箭头。 Did solve the slide but cant make that arrow rotate down on click.确实解决了幻灯片，但无法使该箭头在单击时向下旋转。 HTML: HTML：



  
  
  
 
   
 
    
$('.contacto_menu').click(function(){
    $('.icon-up-open').animate({
        transform: 'rotate(180deg)'
    });

});
$(document).ready(main);
 
var contador = 1;
 
function main () {
	$('.contacto_menu').click(function(){
		if (contador == 1) {
            $('.icon-up-open').animate({
				transform: 'rotate(180deg)'
			});
			$('footer').animate({
				bottom: '0'
			});
			contador = 0;
		} else {
			contador = 1;
			$('footer').animate({
				bottom: '-50px'
            });
            $('.icon-up-open').animate({
				transform: 'rotate(0deg)'
			});
        }
        
    });
}
 
    
footer {
      position: fixed;
      bottom: -50px;
      left: 50%;
      transform: translateX(-50%);
      width:70%;
      max-width: 800px;
      background: rgba(247,151,16,1);
      background: -moz-linear-gradient(-45deg, rgba(247,151,16,1) 0%, rgba(247,54,1,1) 100%);
      background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(247,151,16,1)), color-stop(100%, rgba(247,54,1,1)));
      background: -webkit-linear-gradient(-45deg, rgba(247,151,16,1) 0%, rgba(247,54,1,1) 100%);
      background: -o-linear-gradient(-45deg, rgba(247,151,16,1) 0%, rgba(247,54,1,1) 100%);
      background: -ms-linear-gradient(-45deg, rgba(247,151,16,1) 0%, rgba(247,54,1,1) 100%);
      background: linear-gradient(135deg, rgba(247,151,16,1) 0%, rgba(247,54,1,1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f79710', endColorstr='#f73601', GradientType=1 );
      -webkit-box-shadow: 0px 11px 40px 1px rgba(0,0,0,0.75);
      -moz-box-shadow: 0px 11px 40px 1px rgba(0,0,0,0.75);
      box-shadow: 0px 11px 40px 1px rgba(0,0,0,0.75);
      border-radius: 200px 200px 20px 20px;
      -moz-border-radius: 200px 200px 20px 20px;
      -webkit-border-radius: 200px 200px 20px 20px;
      border: 0px solid #000000;
      z-index: 900;
   
}

.contacto_menu {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  color: #FFF;
  font-size: large;
  top:-25px;

}

.icon-up-open{
  display: inline-block;
}

.footer ul li {
  display: inline-block;
  list-style: none;
  text-align: center;
  width: 32%;
  padding: 15px;
  font-family: 'Open Sans', sans-serif;
  text-decoration: none;
  color: #FFF;
}

.footer ul li a{
  text-decoration: none;
  color: #FFF;

}
 
    
<!DOCTYPE html>  
<link rel="stylesheet" href="css/footer.css">
<script src="java/footer1.js"></script>

<footer>
    <a href="#" class="contacto_menu">Contacto<i class="icon-up-open"></i></a>
        <div class="footer">
            <ul>
                <li>Correo:<a href="#"></a></li>
                <li>Telefono:<a href="#"></a></li>  
                <li>Whatsapp:<a href="#"></a></li>
            </ul>
        </div>
    </footer>
</html>

2 个解决方案

解决方案1
 0  2020-04-05 09:36:33

Can you change animate to css like this你能像这样将animate更改为css

$('.icon-up-open').css({
    transform: 'rotate(180deg)'
});
$('.icon-up-open').css({
    transform: 'rotate(0deg)'
});

You can see here CodePen你可以在这里看到CodePen

解决方案2
 0 已采纳  2020-04-05 09:47:49

I changed your animation logic to work through toggling a class on the <body /> -element, and then defining the animations in your CSS.我更改了您的 animation 逻辑，以通过在<body />元素上切换 class 来工作，然后在 CSS 中定义动画。

The resulting code looks something like this:生成的代码如下所示： 

 $(document).ready(main); // Clicking the.contacto_menu only toggles a CSS class now. Way better performance this way. function main() { $('.contacto_menu').click(function() { $(document.body).toggleClass('contacto-expanded'); }); }
 footer { position: fixed; bottom: -50px; left: 50%; transform: translateX(-50%); width: 70%; max-width: 800px; background: rgba(247, 151, 16, 1); background: -moz-linear-gradient(-45deg, rgba(247, 151, 16, 1) 0%, rgba(247, 54, 1, 1) 100%); background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(247, 151, 16, 1)), color-stop(100%, rgba(247, 54, 1, 1))); background: -webkit-linear-gradient(-45deg, rgba(247, 151, 16, 1) 0%, rgba(247, 54, 1, 1) 100%); background: -o-linear-gradient(-45deg, rgba(247, 151, 16, 1) 0%, rgba(247, 54, 1, 1) 100%); background: -ms-linear-gradient(-45deg, rgba(247, 151, 16, 1) 0%, rgba(247, 54, 1, 1) 100%); background: linear-gradient(135deg, rgba(247, 151, 16, 1) 0%, rgba(247, 54, 1, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f79710', endColorstr='#f73601', GradientType=1); -webkit-box-shadow: 0px 11px 40px 1px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 11px 40px 1px rgba(0, 0, 0, 0.75); box-shadow: 0px 11px 40px 1px rgba(0, 0, 0, 0.75); border-radius: 200px 200px 20px 20px; -moz-border-radius: 200px 200px 20px 20px; -webkit-border-radius: 200px 200px 20px 20px; border: 0px solid #000000; z-index: 900; transition: bottom.4s; /* Added, to make transitions work */ }.contacto_menu { position: absolute; left: 50%; transform: translateX(-50%); text-decoration: none; font-family: 'Open Sans', sans-serif; color: #FFF; font-size: large; top: -25px; }.icon-up-open { display: inline-block; transition: transform.4s; /* Added, to make transitions work */ } /* Added, to make transitions work */.contacto-expanded.icon-up-open { transform: rotate(180deg); } /* Added, to make transitions work */.contacto-expanded footer { bottom: 0; }.footer ul li { display: inline-block; list-style: none; text-align: center; width: 32%; padding: 15px; font-family: 'Open Sans', sans-serif; text-decoration: none; color: #FFF; }.footer ul li a { text-decoration: none; color: #FFF; }
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <footer> <a href="#" class="contacto_menu">Contacto<i class="icon-up-open">R</i></a> <div class="footer"> <ul> <li>Correo: <a href="#"></a> </li> <li>Telefono: <a href="#"></a> </li> <li>Whatsapp: <a href="#"></a> </li> </ul> </div> </footer>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Protractor 无法执行点击<li>标签</li> - Protractor can't perform click on <li> tag 无法在基于Jquery的确认框中单击“是”时执行操作 - Can't Perform action on click yes in Jquery based confirmation box div可以旋转，span不能旋转，但它可以为变换设置动画 - div can rotate, span can't rotate but it can animate the transformation 遇到麻烦，c#、webview 和 invokescriptasync。 无法在下一个链接上执行 Click() - Having trouble, c#, webview and invokescriptasync. Can't perform Click() on Next link 单击直到实际单击该元素 - Perform a click until the element can actually be clicked UIButton可以用于执行UIWebView中的超链接单击吗？ - Can a UIButton be used to perform a hyperlink click in UIWebView? 谷歌无法映射api旋转标记 - google can't maps api rotate marker THREE.JS：无法旋转相机 - THREE.JS : Can't rotate camera 无法使用JavaScript更新收藏夹图标以使其旋转 - Can't update favicon with JavaScript to make it rotate 无法在画布内旋转图像 - Can't rotate image inside canvas
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM