Question

我希望使用.css()在JQuery中获得淡入淡出效果。我可以用声明来做到这一点：

$("p").fadeTo("slow", 0.0);

我能用声明得到类似的效果：

$("p").css("visibility", "hidden");

使用fadeTo()时，我可以指定时间（如“慢”，“快”，毫秒），但我不知道如何用.css()指定时间

请让我知道如何实现这一目标。我对CSS很满意，我希望用.css()

实现这一点

Answer 1

您还可以尝试使用show和hide函数来获得相同的结果，而不需要设置visiblity属性

$("#paragraph").hide("slow");
$("#paragraph").show("slow");

如果你只想隐藏有效的元素，你可以尝试这个选项，然后尝试这个oud

$(document).ready(function(){
    $("button").click(function(){
        $("#p1").slideUp(2000);
    });
});


<p id="p1">Hide me !!</p>
<button>Click me</button>

这个只是隐藏元素表单可见性的观点，但元素保留在你的DOM中。

你可以这样做，你使用animate来减少元素的不透明度而不是完全回调只是将visiblity设置为隐藏。

<p id="hidep">
 data
  dfg;ljdfsgj
  sfdgfdsgdsfg
  fdsgdfs
</p>

 $( "#hidep" ).animate({
  opacity: 0.1
  }, {
    duration: 1000,
    complete: function() {
      $( this ).css("visibility", "hidden");
    }
  });

检查jsfiddle的工作演示：https://jsfiddle.net/7a8nes56/1/

Answer 2

隐藏

$("p").fadeOut(1000); // This will hide the p element with an animation of 1 sec duration

对于节目

$("p").fadeIn(1000);

如果你想用css，那么show

 $('p').css({opacity: 0, visibility: "visible"}).animate({opacity: 1}, 1000); // show p

隐藏

$('p').css({opacity: 1, visibility: "hidden"}).animate({opacity: 0}, 1000); // hide p

Answer 3

有多种方法可以做到这一点。以下是1个片段中的3个示例，因此您可以直观地看到它们的动画效果。

jQuery仅使用.animate()
仅使用css-animate和关键帧
CSS transition借助jQuery。

就个人而言，我更喜欢单独使用CSS，但是因为你要求使用jQuery，我提供了几种方法可以做到这一点。

CSS版本的浏览器支持：

https://caniuse.com/#search=css%20animation

https://caniuse.com/#search=css3%20transition

实现慢动作

在这些情况下，您只会增加持续时间：

jQuery animate()接受一个数字或字符串。持续时间以毫秒为单位;值越高表示动画越慢，而动画越快。默认持续时间为400毫秒。字符串＆＃39;快速＆＃39;并且“慢”＆＃39;可以提供分别指示200和600毫秒的持续时间。 Source
css-animate将持续时间（以秒为单位）作为动画名称后面的第二个参数。不使用速记时，这是animation-duration属性。 Source
transition将持续时间（以秒为单位）作为转换属性/属性后的第二个参数。不使用速记时，这是transition-duration属性。 Source

＆＃13;

$(function() {
    // Using .animate() only:
    $('.jquery-animate').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1}, 5000);
    
    // Using jQuery to apply CSS transition by adding a class on load:
    $('.css-transition-with-jquery').addClass('active');
    
});

＆＃13;

/* CSS Animate method */
@-webkit-keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
.css-animate {
  -webkit-animation: fadeIn 5s ; 
  -moz-animation:    fadeIn 5s ; 
  -o-animation:      fadeIn 5s ; 
  animation:         fadeIn 5s ; 
  animation-timing-function: ease-in; 
}

/* CSS and jQuery Method */
.css-transition-with-jquery {
  visibility: visible;
  opacity: 0;
  transition: opacity 5s;
  transition-timing-function: ease-in;

}
.css-transition-with-jquery.active {
  opacity: 1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p class="jquery-animate">
<strong>jQuery only with .animate()</strong>. Aliquam fringilla lacus erat, in tempus lorem egestas sagittis. Suspendisse in maximus est. Ut elementum ultricies mi, at dictum enim ullamcorper vel. Suspendisse sodales feugiat leo, vel sollicitudin felis eleifend quis. Nullam venenatis viverra ultricies. Nulla vel lorem sem. Praesent vestibulum maximus elit, non consectetur urna eleifend eu. Donec vel feugiat ex.
</p>

<hr/>

<p class="css-animate">
<strong>CSS only using css-animate.</strong> Aliquam fringilla lacus erat, in tempus lorem egestas sagittis. Suspendisse in maximus est. Ut elementum ultricies mi, at dictum enim ullamcorper vel. Suspendisse sodales feugiat leo, vel sollicitudin felis eleifend quis. Nullam venenatis viverra ultricies. Nulla vel lorem sem. Praesent vestibulum maximus elit, non consectetur urna eleifend eu. Donec vel feugiat ex.
</p>

<hr/>

<p class="css-transition-with-jquery">
<strong>CSS transition with jQuery</strong> Aliquam fringilla lacus erat, in tempus lorem egestas sagittis. Suspendisse in maximus est. Ut elementum ultricies mi, at dictum enim ullamcorper vel. Suspendisse sodales feugiat leo, vel sollicitudin felis eleifend quis. Nullam venenatis viverra ultricies. Nulla vel lorem sem. Praesent vestibulum maximus elit, non consectetur urna eleifend eu. Donec vel feugiat ex.
</p>

＆＃13;

如何使用慢动作的JQuery设置CSS属性？

3 个答案: