堆栈内存溢出
  繁体   English   中英

单击时无法显示和隐藏具有淡入淡出效果的文本

[英]Unable to show and hide text with fade effect on click

 原文  2017-01-03 08:09:55  4   4    javascript/ jquery/ html/ css/ animation

问题描述

我试图在上下箭头上创建类似的效果，如下图所示，但由于我的javascript / jquery技能低而陷入困境。

我不知道如何使文本出现，然后随着颜色的变化单击消失。

这是小提琴的链接，以防万一SO代码段不起作用 

 $("span").click(function() { $("span").css("color", "grey"); $(this).css("color", "red"); }); 
 ul > li{ list-style:none; } span { cursor: pointer; } .fa { font-size: 55px; text-indent: 200px; margin-bottom: 20px; margin-top:30px; } 
 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li><span id='select1'><i class="fa fa-long-arrow-up" aria-hidden="true"></i></span></li> <li><span id='select2'><i class="fa fa-long-arrow-down" aria-hidden="true"></i></span></li> </ul>

到目前为止，没有任何答案对我有用，因此我要求对此提供更多帮助。

我在reddit上看到了这种效果，我尝试了很多次，花了很多时间，但没有得到类似的效果。 如果有人可以帮助我理解并创造确切的效果，我将非常感激。

4 个解决方案

解决方案1
 3 已采纳  2017-02-06 22:51:38

这是我的解决方案版本， https://jsfiddle.net/hnk1vw6x/33/请参见下面的一些说明。

的HTML 

<div class="padding-container">
<span id="rating">0</span>
<a class="arrow fa fa-arrow-up" data-animation-text="Nice!" data-value="1"></a><br/>
<a class="arrow fa fa-arrow-down" data-animation-text="Troll" data-value="-1"></a>
</div>

的CSS 

.padding-container {
  width: 60px;
  margin: 100px;
}
#rating {
  float: right;
  font-size: 2.1em;
  width: auto;
}
a.arrow {
  display: inline-block;
  position: relative;
  cursor: pointer;
}
a.arrow:after {
  content: attr(data-animation-text);
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: auto;
  opacity: 0;
}
a.arrow.fa-arrow-up {
  color: #FF0000;
}
a.arrow.fa-arrow-down {
  color: #0000FF;
}
a.arrow.fa-arrow-up:after {
  bottom: 100%;
}
a.arrow.fa-arrow-down:after {
  top: 100%;
}
a.arrow.animate.fa-arrow-up:after {
  animation-name: slideup, bounce;
  animation-duration: 3s;
}
a.arrow.animate.fa-arrow-down:after {
  animation-name: slidedown, bounce;
  animation-duration: 3s;
}
@keyframes slideup {
  from {
    bottom: 100%;
    opacity: 1;
  }
  to {
    bottom: 300%;
    opacity: 0;
  }
}
@keyframes slidedown {
  from {
    top: 100%;
    opacity: 1;
  }
  to {
    top: 300%;
    opacity: 0;
  }
}
@keyframes bounce {
  from {
    font-size: 1em;
  }
  3% {
    font-size: 1.25em;
  }
  6% {
    font-size: 0.75em;
  }
  9% {
    font-size: 1em;
  }
}

的JavaScript 

function arrowAnimationEndHandler(e) {
  var arrow = e.target;
  if (typeof arrow === 'undefined') {
    return;
  }

  arrow.className = arrow.className.replace(/\banimate\b/,'');
}

function arrowClickHandler(e) {
  var arrow = e.target;
  if (typeof arrow === 'undefined') {
    return;
  }

  arrow.className = arrow.className.replace(/\banimate\b/,'');
  setTimeout(function () {
    arrow.className += ' animate';
  }, 0);

  ratingUpdateBusinessLogic(arrow);
}

function ratingUpdateBusinessLogic(arrow) {
  if (typeof ratingElement === 'undefined') {
    return;
  }

  var ratingDelta = parseInt(arrow.getAttribute('data-value'), 10);
  ratingElement.innerHTML = parseInt(ratingElement.innerHTML, 10) + ratingDelta;
}
var ratingElement = document.getElementById("rating");
var arrows = document.getElementsByClassName("arrow");

for (var i = 0; i < arrows.length; i++) {
  arrows[i].addEventListener("animationend", arrowAnimationEndHandler, false);
  arrows[i].addEventListener("click", arrowClickHandler, false);
}

现在一点解释：

这个问题非常复杂，作者要求一个完整的解决方案，而不是一个不清楚的方面的解释。 我决定给出一个答案，因为这样我就可以概述软件设计步骤，这可能会帮助其他人解决另一个复杂的问题。

我认为，完成复杂任务的关键是能够将它们分割成更小的能力，这反过来更容易实现。 让我们尝试将此任务拆分为较小的部分：

  1. 我们需要画两个箭头和一个数字。
  2. 上下箭头应具有不同的颜色。
  3. 我们需要在它们旁边绘制箭头工具提示/标签。
  4. 我们需要为用户交互上的箭头工具提示/标签设置动画。
  5. 我们需要在用户输入上应用我们的业务逻辑（更改评分）。

现在，让我们尝试一一解决那些较小的问题：

  1. 我们需要画两个箭头和一个数字。 好吧，HTML是我们的朋友，下面是一个简单的html代码。 我正在使用超棒的字体绘制实际的箭头图标。 

     <div class="padding-container"> <span id="rating">0</span> <a class="arrow fa fa-arrow-up"></a> <a class="arrow fa fa-arrow-down"></a> </div>

我们希望箭头以某种方式在屏幕上定位，让我们将箭头插入行内，然后在它们之间添加换行符，还添加一些CSS来对齐： 

    .padding-container {
      width: 60px;
      margin: 100px;
    }
    #rating {
      float: right;
      font-size: 2.1em;
      width: auto;
    }
    a.arrow {
      display: inline-block;
      cursor: pointer;
    }

  1. 我们的箭头应具有不同的颜色。 再次这里琐碎的CSS。 颜色不是100％像gif那样，但这是制作屏幕截图并选择正确的颜色的问题-您可以自己完成。 

     a.arrow.fa-arrow-up { color: #FF0000; } a.arrow.fa-arrow-down { color: #0000FF; }

  2. 我们需要在它们旁边绘制箭头工具提示/标签。 好的，这开始很有趣。 让我们使用:after伪元素来绘制我们的工具提示，因为这些工具提示是表示形式的一部分（而不是内容），所以它们不需要反映在html结构中。 我使用:after而不是:before因为font-awesome正在使用before来显示箭头图标;）我们还使用绝对位置将它们相对于实际箭头放置。 这提供了以下CSS： 

     a.arrow { position: relative; } a.arrow:after { content: attr(data-animation-text); display: block; position: absolute; left: 50%; transform: translateX(-50%); text-align: center; width: auto; } a.arrow.fa-arrow-up:after { bottom: 100%; } a.arrow.fa-arrow-down:after { top: 100%; }

    现在，我们的工具提示仅显示在箭头旁边，并且我们可以通过html控制它们的内容，例如出于翻译目的。 工具提示也相对于箭头居中。

  3. 我们需要为用户交互上的箭头工具提示/标签设置动画。 我们可以使用javascript制作元素动画，也可以通过CSS来制作元素。 通过CSS进行操作效率更高，因此，除非我们需要支持真正的旧浏览器，否则请坚持使用CSS。 我们需要实现两个动画，一个是工具提示淡入淡出以及提升/放下，第二个是工具提示反弹。 让我们来介绍一下CSS必须提供的功能： 

     a.arrow:after { opacity: 0; } a.arrow.fa-arrow-up:after { animation-name: slideup, bounce; animation-duration: 3s; } a.arrow.fa-arrow-down:after { animation-name: slidedown, bounce; animation-duration: 3s; } @keyframes slideup { from { bottom: 100%; opacity: 1; } to { bottom: 300%; opacity: 0; } } @keyframes slidedown { from { top: 100%; opacity: 1; } to { top: 300%; opacity: 0; } } @keyframes bounce { from { font-size: 1em; } 3% { font-size: 1.25em; } 6% { font-size: 0.75em; } 9% { font-size: 1em; } }

    现在，我们在加载页面后立即看到了一个不错的标签动画。 到目前为止，所有这些操作都没有使用任何一行JavaScript。 但是任务说我们需要为用户交互动画。

    好的，让我们现在添加一些javascript。 但是在此之前，我们需要触发动画的可能性，让我们使用CSS类来触发它： animate ，然后我们的CSS会像 

     a.arrow.animate.fa-arrow-up:after { animation-name: slideup, bounce; animation-duration: 3s; } a.arrow.animate.fa-arrow-down:after { animation-name: slidedown, bounce; animation-duration: 3s; }

    注意添加了animate类。 如果现在我们将类手动添加到HTML中-我们将再次看到动画。 但是我们需要在用户点击时进行操作，这很容易： 

     function arrowClickHandler(e) { var arrow = e.target; arrow.className += ' animate'; } var arrows = document.getElementsByClassName("arrow"); for (var i = 0; i < arrows.length; i++) { arrows[i].addEventListener("click", arrowClickHandler, false); }

    现在，如果我们加载页面并单击箭头-我们将看到动画，但是只有一次。 我们需要找到一种方法来重置它。 让我们删除动画完成时的animate类。 

     function arrowAnimationEndHandler(e) { var arrow = e.target; if (typeof arrow === 'undefined') { return; } arrow.className = arrow.className.replace(/\\banimate\\b/,''); } var arrows = document.getElementsByClassName("arrow"); for (var i = 0; i < arrows.length; i++) { arrows[i].addEventListener("animationend", arrowAnimationEndHandler, false); }

    现在，我们可以单击箭头，并根据需要多次观看动画。 但是有一个问题，如果动画已经播放，我们将无法重新启动。 为此，我们需要一些技巧： 

     function arrowClickHandler(e) { var arrow = e.target; if (typeof arrow === 'undefined') { return; } arrow.className = arrow.className.replace(/\\banimate\\b/,''); setTimeout(function () { arrow.className += ' animate'; }, 0); }

    只要我们远离animate类，我们就给浏览器执行代码的机会并停止动画，然后再次添加animate类。

  4. 我们需要在用户输入上应用我们的业务逻辑（更改评分）。 这不是火箭科学，我们读取当前值并根据分配给箭头的值对其进行更新： 

     function arrowClickHandler(e) { ... ratingUpdateBusinessLogic(arrow); } function ratingUpdateBusinessLogic(arrow) { if (typeof ratingElement === 'undefined') { return; } var ratingDelta = parseInt(arrow.getAttribute('data-value'), 10); ratingElement.innerHTML = parseInt(ratingElement.innerHTML, 10) + ratingDelta; } var ratingElement = document.getElementById("rating");

更新：使用glyphicon的解决方案需要用对应的glyphicon类（即： glyphicon glyphicon-arrow-up和glyphicon glyphicon-arrow-down替换css / html fa fa-arrow-up和fa fa-arrow-down类。 经过一番思考，我还决定从库类中取消自定义css的绑定，并添加了自定义arrow-up和arrow-down类以简化图标库的替换： 

<a class="arrow arrow-up glyphicon glyphicon-arrow-up" data-animation-text="Sick!" data-value="1"></a>
<a class="arrow arrow-down glyphicon glyphicon-arrow-down" data-animation-text="Suck!" data-value="-1"></a>

的CSS 

a.arrow.arrow-up {
  .
}
a.arrow.arrow-down {
  ...
}
a.arrow.arrow-up:after {
  ...
}
a.arrow.arrow-down:after {
  ...
}
a.arrow.animate.arrow-up:after {
  ...
}
a.arrow.animate.arrow-down:after {
  ...
}

解决方案2
 2  2017-01-03 09:35:03

您可以使用jani动画来获得这种效果。 尝试这个

编辑：为获得确切效果，请使用jQuery缓动插件并给出

easeOut弹性缓和效果 

 $("#select1").click(function() { $(".nice").css("display","block"); $(".nice").animate({ top: -10, }, 500, "easeOutElastic", function() { // Animation complete. $(".nice").css({"opacity":"1", "top":"10px","display":"none"}); }); }); $("#select2").click(function(){ $(".troll").css("display","block"); $(".troll").animate({ top: 130, }, 500,"easeOutElastic", function(){ $(".troll").css({"opacity":"1", "top":"120px","display":"none"}); }); }); 
 ul > li{ list-style:none; } span { cursor: pointer; } .fa { font-size: 55px; text-indent: 200px; margin-bottom: 20px; margin-top:30px; } .nice{ position:absolute; top:10px; text-indent :190px; display:none; } .troll{ position:absolute; top:120px; text-indent : 190px; display:none; } 
 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/> <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> <ul> <li> <p class="nice">Nice</p> <span id='select1'><i class="fa fa-long-arrow-up" aria-hidden="true"></i></span></li> <li><span id='select2'><i class="fa fa-long-arrow-down" aria-hidden="true"></i></span> <p class="troll">Troll</p> </li> </ul>

解决方案3
 1  2017-01-03 08:23:29

只需添加文本并借助Jquery的fadeout和fadein属性显示/隐藏它即可。 检查您更新的小提琴 

$("span").click(function() {
  if($(this).attr('id')=='select1')
    {
      $("#downText").fadeOut(300);
        $("#upText").fadeIn(300);      
    }
    else
    {
    $("#upText").fadeOut(300);
        $("#downText").fadeIn(300);
    }
    $("span").css("color", "grey");
    $(this).css("color", "red");
  });

$("fa").click(function(){
        $("fa").fadeTo("slow", 0.15);
});

解决方案4
 0  2017-01-03 09:32:36

添加setTimeout以使文本在几毫秒后消失： 

$("span").click(function() {
  $("span").css("color", "grey");
  $(this).css("color", "red");
});
$("#select1").click(function() {
  $("#down").fadeOut(300);
  $("#up").fadeIn(300);
  setTimeout(function() {
    $("#up").fadeOut(300); // fade out the up text
  }, 300); // delay of 0.3s before fading out
});
$("#select2").click(function() {
  $("#up").fadeOut(300);
  $("#down").fadeIn(300);
  setTimeout(function() {
    $("#down").fadeOut(300); // fade out the down text
  }, 300); // delay of 0.3s before fading out
});

jsFiddle： https ://jsfiddle.net/qze7mqj4/16/

我还添加了一个position:absolute; 到褪色的文字，这样就不会使箭头“跳”起来。

您可以在此处阅读有关setTimeout的更多信息： http : //www.w3schools.com/jsref/met_win_settimeout.asp

基本上，它告诉浏览器在指定的毫秒数后执行一个函数，在这种情况下，我们告诉浏览器在300ms之后淡出文本。

暂无
暂无

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

相关问题 在JQuery中使用.hide（）.show（）淡入淡出效果 隐藏/显示DIV-将当前效果更改为淡入淡出 导航栏在滚动上显示/隐藏，如脉冲淡入淡出效果 Raphael.js - 我可以使用.show / .hide和淡入淡出效果吗？ 隐藏div悬停并使用淡入淡出显示另一个 如何隐藏文字并在点击时显示 通过单击 div 隐藏和显示文本 显示Java文本图像从文本链接中消失的效果 淡入淡出效果与爬升文字 jQuery淡入淡出效果对5张图片的点击
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM