css3图像淡入淡出(css3 image fadein)

我试图让图像在加载后与css3一起淡入。 问题在于我的方法目前被链接的方式将它淡入淡出一秒两次。 而不是只是空白和淡入。

我的解决方案是尝试将动画代码拆分为一个独立的类，我应用后，我最初设置不透明度为零(我这样做在JS，所以没有启用js的人仍然可以看到图像)。

它仍然没有工作

我认为它是因为在这段代码中，它将不透明度设置为零，并立即添加一个动画过渡类，该类以某种方式捕获不透明度.css()方法，同时其变化仍然存在(不知道这是如何可能的，......不应该它之前完全不透明继续增加课程？)

// nice thumbnail loading

$('.thumb').css('opacity','0').addClass('thumb-animated').on('load', function(){

$(this).css('opacity','1');

});

.resources .thumb-animated {

-webkit-transition: opacity .2s;

-moz-transition: opacity .2s;

-ms-transition: opacity .2s;

-o-transition: opacity .2s;

transition: opacity .2s;

}

I'm trying to have images fade in with css3 once they're loaded. The problem is the way my methods are currently chained it fades it in and out for a split second twice. instead of just being blank and fading in.

my solution was to try and split out the animation code into a seperate class that i apply AFTER i initially set the opacity to zero (i do this in JS so people without js enabled can still see the images).

It's still not working though

I assume its because in this code its setting the opacity to zero and immediately adding an animation transition class which somehow catches the opacity .css() method while its changing still (dont know how this is possible,... shouldnt it complete opacity before moving on to add class?)

// nice thumbnail loading

$('.thumb').css('opacity','0').addClass('thumb-animated').on('load', function(){

$(this).css('opacity','1');

});

.resources .thumb-animated {

-webkit-transition: opacity .2s;

-moz-transition: opacity .2s;

-ms-transition: opacity .2s;

-o-transition: opacity .2s;

transition: opacity .2s;

}

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

更新时间：2019-11-25 19:48

最满意答案

好...

为什么在jQuery中将不透明度设置为1？ 如果你想使用CSS3而不是简单的fadeIn(200)为什么你不添加“不透明：1”到CSS类拇指动画？

编辑：

请注意，如果图像已经在缓存中，则不会触发加载。

另外， !important是必须添加重写通过javascript修改的规则。

你去了： http : //jsfiddle.net/enTCe/5/这似乎在JSfiddle之外完美工作，JSfiddle看起来像等待所有图像加载。

Well...

Why do you set opacity to 1 in jQuery? If you want to use CSS3 and not simply fadeIn(200) why don't you add "opacity: 1" to css class thumb-animated?

EDIT:

Note that load will not be triggered if the image is already in cache.

Also, !important has to be added to rewrite the rule modified via javascript.

There you go: http://jsfiddle.net/enTCe/5/ This seems to work perfectly outside JSfiddle, on JSfiddle looks like it waits for all the images to be loaded.

相关问答

好... 为什么在jQuery中将不透明度设置为1？ 如果你想使用CSS3而不是简单的fadeIn(200)为什么你不添加“不透明：1”到CSS类拇指动画？ 编辑： 请注意，如果图像已经在缓存中，则不会触发加载。 另外， !important是必须添加重写通过javascript修改的规则。 你去了： http : //jsfiddle.net/enTCe/5/这似乎在JSfiddle之外完美工作，JSfiddle看起来像等待所有图像加载。 Well... Why do you set opaci

...

见样本： 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

...

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

...

为什么会这样？ 当您设置动画时，初始关键帧是一个图像，最后一个是另一个图像，只有那些关键帧有一个图像。 所有中间阶段具有不同程度的一个，与另一个混合。 设置步骤(2)使动画仅使用这些中间值中的2个。 一个将是一个坚实的形象。 但另一方将拥有50％的另一方和50％的另一方。 如果你想要这样的动画，只使用2个值，你需要在关键帧的中间设置一个根本性的变化 body{

background: purple;

}

.rabbit{

width: 130px;

height: 224px;

...

你可以这样做： var J_lis = $("#Jerseybox ul li img");

var count_jersey = 0

J_lis.hide();

J_lis.each(function(g) {

//after fadeIn, increase counter

//and check for g == J_lis.length

$(this).delay((g + 1) * 360).fadeIn('fast', function(){

counter_jersey++

...

实际上你需要一个不透明度的动画，你可以在其中设置animation-fill-mode: forwards这样最后一帧在动画的最后一次迭代后继续应用。 更新小提琴 ： http ： //jsfiddle.net/NVk2N/7/ #cover {

...

-webkit-animation: 2s show;

-moz-animation: 2s show;

-ms-animation: 2s show;

animation: 2s show;

-

...

您的代码是正确的，但您必须向.centraltext添加一些属性，因为在应用动画之前它不应该是可见的(在JSFiddle示例中opacity: 0 )。 并且还添加属性animation-fill-mode以保留最后一帧的样式。 示例： JSFiddle .centraltext {

...

opacity: 0;

animation-fill-mode: forwards;

}

Your code is correct, but you must add some property

...

我不知道你提供的代码与手头的问题有什么关系，但这里有一个关于如何淡出，更改文本然后淡入的简单演示。 您应该可以根据自己的需要进行扩展。 var d = document.querySelector("div");

window.addEventListener("load", function() {

d.classList.add("hidden");

});

var i = 0;

d.addEventListener("transitionend", function

...

下一个代码将使TapText TapText将fadeOut并将再次淡入 $("#TapText").click(function(){

vat ThisIt = $(this);

ThisIt.fadeOut(2000 , function(){

ThisIt.fadeIn(2000);

});

});

如果你需要fadeOut和fadeIn之间的延迟你可以使用setTimeOut() $("#TapText").cli

...

function loaderOn(){

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

}

function loaderOff(){

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

}

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

function loaderOn(){

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

}

funct

...