Javascript jquery不隐藏类并在单击时设置动画_Javascript_Jquery_Html_Animation

Javascript jquery不隐藏类并在单击时设置动画

javascript jquery html animation

Javascript jquery不隐藏类并在单击时设置动画,javascript,jquery,html,animation,Javascript,Jquery,Html,Animation,我的目标是创建一个页面，每当我单击一行新文本时，该页面都会显示动画并淡入。为此，我首先通过“fadeDown 4”隐藏元素“fadeDown1”，然后在每次单击“downArrow”时，每n次为每个“fadeDownN”元素设置一次动画问题是为了做到这一点，我首先需要隐藏元素，然后才能淡入。第一个问题是他们没有躲藏起来。第二个问题是动画似乎没有启动 HTML: Lorem ipsum dolor sit amet，是一位杰出的献身者。在英特杜姆酒后驾车。这是自由的。Maecenas是事前的

我的目标是创建一个页面，每当我单击一行新文本时，该页面都会显示动画并淡入。为此，我首先通过“fadeDown 4”隐藏元素“fadeDown1”，然后在每次单击“downArrow”时，每n次为每个“fadeDownN”元素设置一次动画

问题是为了做到这一点，我首先需要隐藏元素，然后才能淡入。第一个问题是他们没有躲藏起来。第二个问题是动画似乎没有启动

HTML:



Lorem ipsum dolor sit amet，是一位杰出的献身者。在英特杜姆酒后驾车。这是自由的。Maecenas是事前的。Donec mollis eleifend nunc quis sagittis。


欧盟的漏洞导致了封建专制。莫利斯的塞德·菲尼布斯和努拉。这是一种特殊的生活方式。把一个简单的句子翻译成英语。我是埃吉斯塔·莱克图斯。


南斯克利里斯调味品是一种智者的调味品，但它是一种未成熟的调味品。在finibus，elit nec lacinia pulvinar，tortor est pretium justo，


不要为自己的生命而抱怨，不要为自己的名言而抱怨。努克前庭马蒂斯酒店。


维尼那提斯佩伦特斯克斯塔斯酒店。整数对空，luctus sed sem nec，volatipat vulputate lacus。

&达尔

脚本代码：

    $(document).ready(function(){

var i = 1; 
var j = 1;

//Hide the fadeDown elements on page load
    $(".downArrow").append("</p> Test </p>");


    function hideThemAll(){

        for (i=1; i < 6 ; i++){
        if (hiddenVars = 1){
            $("fadeDown"+i).hide();
        }
    }
}

hideThemAll();


//click arrow to simultaneously fade in and animate down one "fadeDown" class per click 
//(so no for loop)


    $(".downArrow").on("click",() => {

        $("fadeDown"+j).fadeIn({queue: false, duration:'slow'});
        $("fadeDown"+j).animate({top: "-10px"}, 'slow');
        j++;
    }); 
});

$（文档）.ready（函数（）{
var i=1；
var j=1；
//在页面加载时隐藏fadeDown元素
$（“.downArrow”）。追加（“
测试””；
函数hideThemAll（）{
对于（i=1；i<6；i++）{
如果（hiddenVars=1）{
$（“fadeDown”+i.hide（）；
}
}
}
隐藏小（）；
//单击箭头可同时淡入并在每次单击时设置一个“淡入”类的动画
//（因此，循环不适用）
$（“.downArrow”）。在（“单击”，（）=>{
$（“fadeDown”+j）.fadeIn（{queue:false，duration:slow}）；
$（“fadeDown”+j）。设置动画（{top:-10px}，'slow'）；
j++；
}); 
});

您的问题是需要CSS动画解决方案

<!DOCTYPE html>
<head>

<style type="text/css">

.fadeDown:hover {animation: AnimText 2s linear 0s infinite alternate none;}

@keyframes AnimText {
   0% {opacity:1;}
  50% {opacity:0.5;}
 100% {opacity:0;}
}

</style>
</head>

<body>

<p class="fadeDown">Some demo text...</p>

<p class="fadeDown">Another line...</p>

<p class="fadeDown">Yet another...</p>


</body>
</html>


.fadeDown:悬停{动画：AnimText 2s线性0s无限交替无；}
@动画文本的关键帧{
0%{不透明度：1；}
50%{不透明度：0.5；}
100%{不透明度：0；}
}
一些演示文本
另一行
又一个

哦，天哪-

我没在用电话。我的JavaScript中的类选择器，用于选择类。问题解决了！各位，别忘了你的语法

什么是

Hide（）

不应该是

Hide（）

？JavaScript区分大小写。谢谢，我交换了大小写。不幸的是，这个问题似乎仍然存在。因此，ID的css选择器是

#someID

。您在所有选择器中都缺少

字符。哦，实际上，您正在尝试为类创建css选择器，您需要在开始时使用

字符，而不是

字符。想法不错，但是在我的代码中，我想点击不是动画文本本身的箭头来触发文本上的动画，从我一直在研究的内容来看，这不是纯CSS所能做到的。你是对的。根据单击事件进行更改的唯一方法是使用Javascript。

<!DOCTYPE html>
<head>

<style type="text/css">

.fadeDown:hover {animation: AnimText 2s linear 0s infinite alternate none;}

@keyframes AnimText {
   0% {opacity:1;}
  50% {opacity:0.5;}
 100% {opacity:0;}
}

</style>
</head>

<body>

<p class="fadeDown">Some demo text...</p>

<p class="fadeDown">Another line...</p>

<p class="fadeDown">Yet another...</p>


</body>
</html>