css+toggle什么意思,切换CSS3淡出？(Toggle CSS3 fade?)

切换CSS3淡出？(Toggle CSS3 fade?)

是否可以使用jQuery来切换元素的不透明度(以便您可以通过-webkit-transition:opacity .5s linear; )将其淡入/淡出然后将display更改为display:block if element显示，或display:none如果元素被隐藏，则为display:none ？

例如：您单击标签，通过将其不透明度设置为1并设置display:block来显示div。 然后再次单击标签，它将不透明度设置为0，然后将显示设置为none 。

我的尝试如下：

.visible{

opacity: 1;

-webkit-transition:opacity .5s linear;

display: block;

}

.close{

display: none;

opacity:0;

width:20px;

height:20px;

background-color:red;

-webkit-transition:opacity .5s linear;

}

$(".toggle").click(function(){

if ($(".close").css("display") === "none") {

$(".close").addClass("visible").delay(500).promise().done(function () {

$(this).css("display", "block");

});

};

if ($(".close").css("display") === "block") {

$(".close").removeClass("visible").delay(500).promise().done(function () {

$(this).css("display", "none");

});

};

});

Is it possible to use jQuery to toggle the opacity of an element (so that you can fade it in/out by the means of -webkit-transition:opacity .5s linear;) and then change the display to display:block if the element is shown, or display:none if the element is hidden?

For example: You click on an tag, which shows a div by means of setting it's opacity to 1 and setting display:block. Then you click the tag again, and it sets the opacity to 0 and then sets the display to none.

My attempt at this is below:

.visible{

opacity: 1;

-webkit-transition:opacity .5s linear;

display: block;

}

.close{

display: none;

opacity:0;

width:20px;

height:20px;

background-color:red;

-webkit-transition:opacity .5s linear;

}

$(".toggle").click(function(){

if ($(".close").css("display") === "none") {

$(".close").addClass("visible").delay(500).promise().done(function () {

$(this).css("display", "block");

});

};

if ($(".close").css("display") === "block") {

$(".close").removeClass("visible").delay(500).promise().done(function () {

$(this).css("display", "none");

});

};

});

原文：https://stackoverflow.com/questions/12488099

更新时间：2020-09-08 10:09

最满意答案

这个文档的特定页面很有帮助：

过渡属性 - 应该制作什么属性，例如不透明度。

transition-duration - 转换应持续多长时间。

transition-timing-function - 转换的定时功能 (例如，线性与容易对比自定义立方贝塞尔函数)。

过渡 - 所有三个属性的简写。

因此，您可以调用特定属性，例如opacity ，或者您可以在类名中使用all 。 我认为后者可能更有用，即使您只有一个属性可以申请。

基本上，您可以使用具有all过渡属性的类并切换类名。 我发现有趣的事情之一是你可以在class add上实际执行多个版本(但是在删除类时不会产生相同的效果)。 此外，根据width和height耦合opacity ，它将比使用display: none更好，据我所知。

下面演示了如何在层中使用-webkit-transition属性。 这是一个简化版本，然后是更复杂的演示：

#block.transition让我区分我的过渡属性：

基本属性，不是动画：

#block {

margin: 25px auto;

background: red;

}

最初“看不见”的状态：

#block.transition {

opacity: 0;

width: 0;

height: 0;

padding: 0;

-webkit-transition: all 2s ease-in-out;

}

动画步骤：

#block.transition.show {

opacity: .3;

width: 50px;

height: 50px;

background: orange;

-webkit-transition: all .5s ease-in-out;

}

#block.transition.show {

opacity: .4;

width: 150px;

height: 150px;

background: black;

-webkit-transition: all 1s ease-in-out;

}

#block.transition.show {

opacity: 1;

padding: 100px;

background: blue;

-webkit-transition: all 3s ease-in-out;

}​

注意，我在这里所做的就是切换.show类：

$(document).ready(function load(){

var $block = $("#block");

$('.toggle').click(function c(){

$block.toggleClass('show');

});

});​

标记

Toggle Blocks

CSS

包含#block ：

#block {

margin: 25px auto;

background: #333;

-webkit-transition: opacity, display, width 1.5s ease-in-out;

}

#block.transition {

opacity: 0;

width: 0;

padding: 0;

border: 1px solid yellow;

-webkit-transition: all 1.9s ease-in-out;

}

#block.transition.show {

opacity: .3;

border-color: blue;

-webkit-transition: all .5s ease-in-out;

}

#block.transition.show {

opacity: 1;

width: 550px;

padding: 25px;

border-width: 15px;

-webkit-transition: all 3s ease-in-out;

}

三人组.blocks ：

.blocks {

display: inline-block;

background-color: red;

}

.blocks.transition {

opacity: .1;

width: 0;

height: 0;

margin: 0;

-webkit-transition: all 1.7s ease-in-out;

}

.blocks.transition.show {

opacity: 1;

width: 150px;

height: 150px;

margin: 10px;

-webkit-transition: all 4.5s ease-in-out;

}​

jQuery的

$(document).ready(function load(){

var $block = $("#block"),

$blocks = $block.find(".blocks.transition");

$('.toggle').click(function c(){

$block.toggleClass('show');

$blocks.delay(1500).toggleClass('show');

});

});​

This particular page of the documentation was helpful:

transition-property – What property should animate, e.g., opacity.

transition-duration – How long the transition should last.

transition-timing-function – The timing function for the transition (e.g., linear vs. ease-in vs. a custom cubic bezier function).

transition – A shorthand for all three properties.

So you can call a specific property, like opacity, or you can use all in a class name. I think the latter is possibly more useful, even if you have only one property to apply.

Basically, you can use a class with the all transition properties and toggle the class name. One of the things I found interesting was that you can actually do multiple versions on the class add (not quite the same effect occurs when removing the class, though). Also, couple opacity with width and height and it will work better than using display: none, as far as I could tell.

The below demonstrates how you could use the -webkit-transition property in layers. This is a simplified version, followed by a more sophisticated demonstration:

#block.transition let's me differentiate my transition properties:

Basic properties, not animated:

#block {

margin: 25px auto;

background: red;

}

The initial "unseen" state:

#block.transition {

opacity: 0;

width: 0;

height: 0;

padding: 0;

-webkit-transition: all 2s ease-in-out;

}

And the animation steps:

#block.transition.show {

opacity: .3;

width: 50px;

height: 50px;

background: orange;

-webkit-transition: all .5s ease-in-out;

}

#block.transition.show {

opacity: .4;

width: 150px;

height: 150px;

background: black;

-webkit-transition: all 1s ease-in-out;

}

#block.transition.show {

opacity: 1;

padding: 100px;

background: blue;

-webkit-transition: all 3s ease-in-out;

}​

Note, all I'm doing here is toggling the .show class:

$(document).ready(function load(){

var $block = $("#block");

$('.toggle').click(function c(){

$block.toggleClass('show');

});

});​

Markup

Toggle Blocks

​CSS

The containing #block:

#block {

margin: 25px auto;

background: #333;

-webkit-transition: opacity, display, width 1.5s ease-in-out;

}

#block.transition {

opacity: 0;

width: 0;

padding: 0;

border: 1px solid yellow;

-webkit-transition: all 1.9s ease-in-out;

}

#block.transition.show {

opacity: .3;

border-color: blue;

-webkit-transition: all .5s ease-in-out;

}

#block.transition.show {

opacity: 1;

width: 550px;

padding: 25px;

border-width: 15px;

-webkit-transition: all 3s ease-in-out;

}

Group of three .blocks:

.blocks {

display: inline-block;

background-color: red;

}

.blocks.transition {

opacity: .1;

width: 0;

height: 0;

margin: 0;

-webkit-transition: all 1.7s ease-in-out;

}

.blocks.transition.show {

opacity: 1;

width: 150px;

height: 150px;

margin: 10px;

-webkit-transition: all 4.5s ease-in-out;

}​

jQuery

$(document).ready(function load(){

var $block = $("#block"),

$blocks = $block.find(".blocks.transition");

$('.toggle').click(function c(){

$block.toggleClass('show');

$blocks.delay(1500).toggleClass('show');

});

});​

相关问答

我实际上问了一个非常相似的问题： 不透明效果从1.0到0，但不是0到1.0 。 检查出来，看看它是否适合你。 否则，尝试向fader元素添加一个类，而不是添加样式声明。 然后，在您的实际CSS中，编写推子元素转换的代码。 I actually asked a very similar question with the same issue a while back: Opacity effect works from 1.0 to 0, but not 0 to 1.0. Check the o

...

见样本： http://jsfiddle.net/GaYKF/56/ 使用jquery： $("#myDiv").hover(

function(){

$(this).fadeTo('slow', 0.3, function()

{

$(this).css('background-image', 'url("http://1.bp.blogspot.com/-tOHKWImzMJQ/TlHqjy1C_II/AAAAAAAAAWw/T5WGegi1sVc/s320/bl

...

目前我认为如果不添加其他元素，这是不可能的。 但是，如果你愿意添加另一个(不可见)元素，你可以做这样的事情 ，它可以在悬停时用动画阴影切换元素的不透明度和相同的大小和位置 .item{

height: 100px;

width: 100px;

background: gray;

}

.animation {

box-shadow: 2px 2px 6px rgba(0,0,0,.5);

-webkit-transition: -webkit-anim

...

您只需要在@keyframes添加一个百分比@keyframes ： .text {

/* fade in */

-webkit-animation: fadeinout 4s;

/* Safari, Chrome and Opera > 12.1 */

-moz-animation: fadeinout 4s;

/* Firefox < 16 */

-ms-animation: fadeinout 4s;

/* Internet Explo

...

这个文档的特定页面很有帮助： 过渡属性 - 应该制作什么属性，例如不透明度。 transition-duration - 转换应持续多长时间。 transition-timing-function - 转换的定时功能 (例如，线性与容易对比自定义立方贝塞尔函数)。 过渡 - 所有三个属性的简写。 因此，您可以调用特定属性，例如opacity ，或者您可以在类名中使用all 。 我认为后者可能更有用，即使您只有一个属性可以申请。 基本上，您可以使用具有all过渡属性的类并切换类名。 我发现有趣的事情

...

这种方法非常简单，但你需要像Paulie_D的评论中提到的那样进行数学运算。 我会选择是否使用它。 就个人而言，我认为这种方法没有任何问题，或者任何复杂性都没有。 要淡入/淡出的元素是静态的。 整体方法如下： 我们有3个元素/段落，为了示例目的，我将使它们在前3秒内淡入，在接下来的10秒内保持原样并在最后消失。 因此，对于每个元素，我们在动画时间中总共需要16秒。 当第一个元素完成动画并且第二个或第三个元素被动画化时，前面的元素应该保持最终状态(即淡出)。 为此，需要完成以下工作： 设置所有元素的

...

您可以在图像上叠加PNG图像以获得所需的效果。 IE无法正确呈现部分透明的PNG图像。 对于此浏览器，您需要一些解决方法，例如IE PNG Fix 。 在这里演示 在现代浏览器中，您可以使用CSS3 box-shadow属性来实现此目的。 这里有CSS3演示 You can overlay a PNG image over your image to get the desired effect. IE does not render partially transparent PNG image

...

删除filter: alpha(opacity=50); 并添加opacity:0; .title div.tooltip{...为我工作。 不透明度的默认值为1，因此淡入时间从1变为0.5 - 此外，我相信filter: alpha(opacity=50)完全覆盖不透明度过渡并向右跳到不透明度= 50。 您还可以为filter添加过渡 .title:hover div.tooltip{

display: inline-block;

opacity: 0.5;

}

.title

...

编辑：关于yaki的纯CSS3解决方案的答案。 你没有给浏览器足够的时间来完成转换。 如果你将setTimeout添加到后面的语句中，它应该可以工作。 像这样的东西： $('#buttonleft').css("opacity","0");

$('#buttonright').css("opacity","0");

setTimeout(function(){$('#buttonleft').css("opacity","1");}, 5000);

setTimeout(function(){$(

...

function loaderOn(){

$('.loading').fadeIn('slow');

}

function loaderOff(){

$('.loading').fadeOut('slow');

}

完整代码： $(document).ready(function(){

function loaderOn(){

$('.loading').fadeIn('slow');

}

funct

...