Javascript 如何使用相同的按钮来实现fadeOut（）和fadeIn（）？_Javascript_Jquery_Html

Javascript 如何使用相同的按钮来实现fadeOut（）和fadeIn（）？

javascript jquery html

Javascript 如何使用相同的按钮来实现fadeOut（）和fadeIn（）？,javascript,jquery,html,Javascript,Jquery,Html,我的问题就像我的标题一样。当我点击按钮时，我想淡出一张图片，当我再次点击同一个按钮时，我想再次淡出图片 $("#btn").click(function(){ if($("#div1").display == 1){ // Your comparison was wrong, you assigned the value 1 to $("#div1").display $("#div1").fadeOut(1000,"easeOutBounce",func

我的问题就像我的标题一样。当我点击按钮时，我想淡出一张图片，当我再次点击同一个按钮时，我想再次淡出图片

$("#btn").click(function(){
    if($("#div1").display == 1){       // Your comparison was wrong, you assigned the value 1 to  $("#div1").display
        $("#div1").fadeOut(1000,"easeOutBounce",function(){         
            alert("Fade Out");
        });
    }
    else{
        $("#div1").fadeIn({
            duration: 1000,
            easing: "easeOutBounce",
            complete: function(){
                alert("Fade In");
            }
        });
    }
})

我的结果是，当我完成fadeOut（）时，它会弹出“fadeOut”。当我再次点击按钮时，它会再次显示“淡出”。它没有运行其他部分。它没有fadeIn（）并显示“淡入”。

我怎样才能做到这一点呢？

您的if中有一项任务

 if($("#div1").display = 1){
                       ^^^

这将永远是真的。此外，我不知道这是否是检查DOM上是否有活动内容的正确方法，通常使用

$（元素）.is（“：可见”）
您的代码可以简化为一个
你只需要在这里打个电话。那就行了

$（“#btn”）。单击（函数（）{
$（“#t”）.fadeToggle（）
})

这是一个div
BTN
您的if中有一个作业
 if($("#div1").display = 1){
                       ^^^

这将永远是真的。此外，我不知道这是否是检查DOM上是否有活动内容的正确方法，通常使用
$（元素）.is（“：可见”）
您的代码可以简化为一个
你只需要在这里打个电话。那就行了

$（“#btn”）。单击（函数（）{
$（“#t”）.fadeToggle（）
})

这是一个div
BTN
要实现切换功能，可以使用fadeToggle（）方法：
要实现切换功能，可以使用fadeToggle（）方法：
下面是一个切换淡入淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出
// HTML
<button > toggle</button>
<img src="https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt=""
/>

// JS
$('button').click(()=>{
  $( "img" ).fadeToggle( "slow", "linear" )
})

//HTML
切换
//JS
$（“按钮”）。单击（（）=>{
$（“img”）.fadeToggle（“慢速”、“线性”）
})
下面是一个切换淡入淡出效果的方法，它可以帮助您切换淡入淡出效果
// HTML
<button > toggle</button>
<img src="https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt=""
/>

// JS
$('button').click(()=>{
  $( "img" ).fadeToggle( "slow", "linear" )
})

//HTML
切换
//JS
$（“按钮”）。单击（（）=>{
$（“img”）.fadeToggle（“慢速”、“线性”）
})
您必须使用fadeToggle（）
jquery方法
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").fadeToggle("slow");
    });
});
</script>
</head>
<body>

<button>Click</button><br><br>

<div id="div1" style="width:80px;height:80px;background-color:red;"></div>

</body>
</html>


$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
美元（“#div1”）。淡入淡出（“慢”）；
});
});
单击


您必须使用fadeToggle（）
jquery方法
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").fadeToggle("slow");
    });
});
</script>
</head>
<body>

<button>Click</button><br><br>

<div id="div1" style="width:80px;height:80px;background-color:red;"></div>

</body>
</html>


$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
美元（“#div1”）。淡入淡出（“慢”）；
});
});
单击


我建议您改用
fadeToggle（[持续时间][放松][完成]）

$（“#btn”）。单击（函数（）{
$（'#div1'）。衰减切换（“慢”、“线性”）；
})
#div1{宽度：50px；高度：50px；背景色：黄色}



按钮
我建议您改用
fadeToggle（[持续时间][放松][完成]）

$（“#btn”）。单击（函数（）{
$（'#div1'）。衰减切换（“慢”、“线性”）；
})
#div1{宽度：50px；高度：50px；背景色：黄色}



按钮
为了完整起见，这里仅使用javascript和CSS即可获得相同的效果：

var squareDiv=document.getElementsByTagName（'div'）[0]；
var toggleFadeButton=document.getElementsByClassName（'toggle-fade'）[0]；
函数toggleFade（）{
squareDiv.classList.toggle（'fade'）；
}
toggleFadeButton.addEventListener（'click'，toggleFade，false）
div{
显示：内联块；
宽度：100px；
高度：100px；
保证金：12px 12px 0；
背景色：rgb（255,0,0）；
垂直对齐：底部对齐；
不透明度：1；
过渡：不透明度1.2s线性；
}
淡入淡出{
不透明度：0；
}

切换淡入淡出
为了完整起见，仅使用javascript和CSS即可获得相同的效果：

var squareDiv=document.getElementsByTagName（'div'）[0]；
var toggleFadeButton=document.getElementsByClassName（'toggle-fade'）[0]；
函数toggleFade（）{
squareDiv.classList.toggle（'fade'）；
}
toggleFadeButton.addEventListener（'click'，toggleFade，false）
div{
显示：内联块；
宽度：100px；
高度：100px；
保证金：12px 12px 0；
背景色：rgb（255,0,0）；
垂直对齐：底部对齐；
不透明度：1；
过渡：不透明度1.2s线性；
}
淡入淡出{
不透明度：0；
}

切换淡入淡出
您熟悉切换吗？此外，您还有$（“#div1”）.display=1
，我不知道它是什么，但应该是$（“#div1”）.display==1
正如@GeorgeBailey所说的，检查if语句中的比较运算符谢谢你们，但当我更改为“==”时，它就不起作用了。。。但是我用fadeToggle（）解决了这个问题。因为最好的解决方案是使用fadeToggle，但只是为了找出代码中的错误，我认为您应该引用的css属性是不透明的。您熟悉toggle吗？此外，您还有$（“#div1”）.display=1
，我不知道它是什么，但应该是$（“#div1”）.display==1
正如@GeorgeBailey所说的，检查if语句中的比较运算符谢谢你们，但当我更改为“==”时，它就不起作用了。。。但是我用fadeToggle（）解决了这个问题。因为最好的解决方案是使用fadeToggle，但只是为了找出代码中的错误，我认为您应该引用的css属性是opacityWill（可能是…+1，如果您添加对更改内容/原因的描述。请参见：抱歉，先生@freedomn-m在这个场景中，我从未见过$（“#div1”）。display==1，也许这是可能的，但我不知道更多。我认为，查找div的条件是hide或show，任务是根据其display属性执行的。您的答案没有问题-只需要在描述中做出注释，以显示您在代码中所做的更改。meta链接对此进行了更详细的解释——概括地说：虽然这段代码可能会回答这个问题，但提供关于它如何和/或为什么解决这个问题的附加上下文将提高答案的长期价值。Will（可能…）+1，如果您添加对您所做更改的描述/原因。请参阅：抱歉，先生@freedomn-m在这个场景中，我从未见过$（“#div1”）.display==1，可能这是可能的，但我不知道更多