使用jQuery将新的css应用于元素，如何添加转换

Applying new css to elements with jQuery, how to add transition?

本文关键字：何添加 添加 转换 元素 jQuery 应用于 css 使用      更新时间：2023-09-26

我有这个jQuery规则，可以将.preloader设置为不显示

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

I我多么希望它以淡出效果消失，而且当它淡出放大时，我不知道如何做缩小效果，但我试着应用它使其淡出

$(".preloader").css("display", "none").fadeOut("200");

这怎么没用。你能建议一下如何达到这两种效果吗？同样，解决方案是否也能起作用？(淡入淡出，放大到原始大小(

要将其淡出，只需使用fadeOut()即可。动画的结尾实际上是为元素设置display: none：

$(".preloader").fadeOut("200");

$(".preloader").toggle('hide');和$(".preloader").toggle('show');应该这样做，但如果您不关心display的状态，$.toggle()本身就可以工作。

然而，

$(".preloader").stop(true,false).animate({
    width: 'toggle',
    height: 'toggle',
    opacity: 'toggle'
});

更酷，你只需要一句话。您也可以使用boolean和$.toggle(yourShowStateBooleanVariableGoesHere)。

此外，我建议您使用id而不是class选择器，除非它绝对必须应用于所有class es(我觉得这很少见(。

$(".preloader").css("display", "none").fadeOut("200");

这段代码首先隐藏了.proader，然后尝试fadeOut，因为它已经被隐藏了，所以它是不可执行的。

试试这个：

$(".preloader").fadeOut(200);

或

$(".preloader").fadeOut("fast");

$(".preloader").hide().fadeIn("200");
$(".preloader").fadeOut("200");

当fadeOut效果完成时，它会将显示设置为none，因此您不需要css方法。

$(document).ready(function(){
    $(".preloader").hover(function(){
        $(".preloader").fadeOut();
    }, function(){
         $(".preloader").fadeIn();   
    });
});

http://jsfiddle.net/BY3tz/8/

这应该会给你一些提示。

如果您还想缩小，这可能是一个可能的解决方案：

$('.preloader').animate({width: 'toggle', height: 'toggle', opacity: 'toggle'}, 1000);

用同样的方法把它拿回来。

看看小提琴。

相关文章：