jquery fadein css同时用,如何同时运行jQuery fadeIn（）和slideDown（）？

这是我的解决方案，您可以将其用作jQuery插件。

(function($) {

'use strict';

// Sort us out with the options parameters

var getAnimOpts = function (a, b, c) {

if (!a) { return {duration: 'normal'}; }

if (!!c) { return {duration: a, easing: b, complete: c}; }

if (!!b) { return {duration: a, complete: b}; }

if (typeof a === 'object') { return a; }

return { duration: a };

getUnqueuedOpts = function (opts) {

return {

queue: false,

duration: opts.duration,

easing: opts.easing

};

// Declare our new effects

$.fn.showDown = function (a, b, c) {

var slideOpts = getAnimOpts(a, b, c), fadeOpts = getUnqueuedOpts(slideOpts);

$(this).hide().css('opacity', 0).slideDown(slideOpts).animate({ opacity: 1 }, fadeOpts);

};

$.fn.hideUp = function (a, b, c) {

var slideOpts = getAnimOpts(a, b, c), fadeOpts = getUnqueuedOpts(slideOpts);

$(this).show().css('opacity', 1).slideUp(slideOpts).animate({ opacity: 0 }, fadeOpts);

};

}(jQuery));

现在，您可以像使用jQuery的.fadeIn(或fadeOut)效果一样使用它。

// Show

$('.alert').showDown('slow');

// Hide

$('.alert').hideUp('fast', function() {

// Animation complete: '.alert' is now hidden

});

这将通过渐变效果调整元素的高度。

它最初发布在我的博客上。

jquery fadein css同时用,如何同时运行jQuery fadeIn（）和slideDown（）？相关推荐

jQuery操作css方法
目录一.jQuery可以使用css方法来修改元素样式二.设置类的样式方法 1.添加类 2.移除类 3.切换类三.类操作与className区别四.显示隐藏效果 1.显示语法 2.隐藏语法 3. ...
jquery动画效果 animate() 自定义动画 stop() 停止运行动画 fadeIn()/fadeOut()/fadeTo() 淡入淡出
jquery动画效果今天给大家介绍一下jQuery当中的几种动画效果. . animate() 自定义动画 stop() 停止运行动画 fadeIn()/fadeOut()/fadeTo() 淡入淡 ...
android 运行jquery,Android端JQueryMobile使用教程(一)
一. 通过Javascript访问Android的Java代码 1. 其实WebApp这个版块已经放置一段时间了,但是一直没有写文章,那是因为我还在学习中. iscrollview下载地址:https ...
jQuery添加css样式/动画效果
目录 jQuery操作css: css属性: 动画: 停止动画: 尺寸: 父/子/兄弟元素: 父元素: 子元素: 兄弟元素: 过滤: 遍历: jQuery操作css: addClass() - 向被选 ...
jquery关于css,jQuery css操作
jQuery操作css的元素样式 1.访问匹配元素的样式属性来个小案例: //宽高都是200px,背景颜色红色; 怎么获取div的属性值呢: $("#div").css(&quo ...
使用jQuery的.css()和.attr()方法设置元素left属性的注意点
今天在使用jQuery方法".css()"设置"ajax-loader.gif"的位置时出了点小状况,关键代码如下(为了简化,这里假定要给"ajax- ...
html css 多选下拉框,jQuery多选下拉框插件
jquery.multi-select.js是一款jQuery多选下拉框插件.该插件可以将select元素转换为带checkbox的多选下拉框,非常实用. 使用方法在页面中引入下面的文件. lt;l ...
38动感菜单 38 jQuery And CSS Drop Down Multi Level Menu Solutions
参看: http://www.1stwebdesigner.com/freebies/38-jquery-and-css-drop-down-multi-level-menu-solutions/ 3 ...
jQuery操作CSS常见问题
1.jquery操作css !important无效解决: 这种写法:$('#oDiv').css({"width":"100px", "color ...
jquery访问css类,jQuery - 获取并设置 CSS 类
2017-09-16 摘抄自W3school-jQuery - 获取并设置 CSS 类希望帮助自己系统地打好基础,也能在做笔记的同时添加一些自己额外的收获. 通过 jQuery,可以很容易地对 CS ...

jquery fadein css同时用,如何同时运行jQuery fadeIn（）和slideDown（）？

jquery fadein css同时用,如何同时运行jQuery fadeIn（）和slideDown（）？相关推荐

最新文章

热门文章