[英]jQuery effect .fadeTo() with toggle?
I want to know the simplest way to toggle the .fadeTo()
effect when someone click again on Click Me!
我想知道当有人再次
Click Me!
时切换.fadeTo()
效果的最简单方法Click Me!
button then it will reverse the process again. 按钮然后它将再次反转该过程。 I mean just like the
.fadeToggle()
works or something like that. 我的意思就像
.fadeToggle()
或类似的东西。 But using .fadeToggle()
cause the div to disappear. 但是使用
.fadeToggle()
会导致div消失。
Here is my - JSFiddle 这是我的 - JSFiddle
HTML HTML
<button>Click Me!</button>
<div></div>
CSS CSS
div {
background-color: #ff0000;
width: 200px;
height: 200px;
margin: 20px
}
jQuery jQuery的
$(document).ready(function(){
$("button").click(function(){
$("div").fadeTo(400,0.4);
});
});
You could use following snippet: 您可以使用以下代码段:
$(document).ready(function () {
$("button").click(function () {
this.toggle = !this.toggle;
$("div").stop().fadeTo(400, this.toggle ? 0.4 : 1);
});
});
Or usually better solution is to toggle a class instead: 或者通常更好的解决方案是切换一个类:
CSS: CSS:
div {
background-color: #ff0000;
width: 200px;
height: 200px;
margin: 20px;
-webkit-transition: opacity 400ms linear;
transition: opacity 400ms linear;
}
div.faded {
opacity:.4;
}
jQuery: jQuery的:
$(document).ready(function () {
$("button").click(function () {
$("div").toggleClass('faded');
});
});
Much simpler , 更简单,
<button>fadeToggle p1</button>
<p>This paragraph has a slow, linear fade.</p>
<script>
$( "button:first" ).click(function() {
$( "p:first" ).fadeToggle( "slow", "linear" );
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.