jq的常用效果方法

js/jq

简述：①hide()、show()、toggle()方法：②fadeIn()、fadeOut()、fadeToggle()、fadeTo()方法：③slideDown()、slideUp()、slideToggle()方法：④动画animate()方法：⑤停止动画stop()方法：鼠标划过时切换效果，当前导航实现效果，电话跳转拨打，复制微信号跳转，app跳转

详情：

//jq的效果方法

①hide()、show()、toggle()方法：

语法：

$(selector).hide(速度，动画效果，回调函数);

$(selector).show(速度，动画效果，回调函数);

$(selector).toggle(速度，动画效果，回调函数);

速度以毫秒为单位或fast/slow也行；动画效果jq提供"linear"(匀速)，"swing"(先慢后快，推荐)；回调函数自定义

$("#hide").click(function(){

$(".p1").hide();

$(".p1").hide(1000,"swing");//一秒，先慢后快消失

$(".p1").hide(1000,"swing"，function(){

alert("消失后的事件函数")

});

$("#show").click(function(){

$("p").show();//使用方式同上

});

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

$("p").toggle();//使用方式同上

});

②fadeIn()、fadeOut()、fadeToggle()、fadeTo()方法：

语法：

$(selector).fadeIn(speed,callback);//用于淡入已隐藏的元素,参数speed可用三种同hide()方法

$(selector).fadeOut(speed,callback);//用于淡出可见元素

$(selector).fadeToggle(speed,callback);//在 fadeIn() 与 fadeOut() 方法之间进行切换

$(selector).fadeTo(speed,opacity,callback);//fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）

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

$("#div1").fadeIn();

$("#div2").fadeOut("slow");

$("#div3").fadeToggle(3000);

$("#div3").fadeTo(1000,0.25);//0为全透明了

});

③slideDown()、slideUp()、slideToggle()方法：

语法：

(selector).slideUp(speed,callback);//向上滑动元素

$(selector).slideToggle(speed,callback);//在 slideDown() 与 slideUp() 方

法之间进行切换

$("#flip").click(function(){

$("#panel01").slideDown();

$("#panel02").slideUp(1000);

$("#panel02").slideslideToggle(1000,function(){

alert("来回切换")

});

④动画animate()方法：

语法：

$(selector).animate({params},speed,callback);//{params}为要改变的css样式，来形成动画

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

方式一：可以多个属性

$("div").animate({

left:'250px',

opacity:'0.5',

height:'150px',

width:'150px'

});

方式二：部分效果可以使用相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=;

$("div").animate({

left:'250px',

height:'+=150px',

width:'+=150px'

});

方式三：使用预定义的值，属性的动画值设置为 "show"、"hide" 或 "toggle"

$("div").animate({

height:'toggle'

});

方式四：动画队列，给一个对象绑定多个动画，逐步执行。但是使用stop()终止中途某一动画后，之后的动画不在执行。

var div=$("div");//选择需要动画的对象

div.animate({height:'300px',opacity:'0.4'},"slow");//执行顺序：1

div.animate({width:'300px',opacity:'0.8'},"slow");//2

div.animate({height:'100px',opacity:'0.4'},"slow");//3

div.animate({width:'100px',opacity:'0.8'},"slow");//4

});

⑤停止动画stop()方法：

语法：

$(selector).stop(stopAll,goToEnd);//两个参数都是可选的，stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，下一个动画开始，为true，则停止所有动画效果而不是只停止当前动画； goToEnd 参数规定是否立即完成当前动画。默认是 false；

//默认地，stop() 会清除在被选元素上指定的当前动画

$("#stop").click(function(){

$("#panel").stop();

});

鼠标划过时切换效果

$(".gg-left-box-warp").hover(function(){

$(".coop02-hover-left").css('opacity','0.3');

$(".coop021-text01").css('display','none');

$(".coop02-flist-left").css('opacity','1');

$(".coop02-flist-left").css('display','block');

},function(){

$(".coop02-hover-left").css('opacity','0.7');

$(".coop021-text01").css('display','block');

$(".coop02-flist-left").css('display','none');

$(".coop02-flist-left").css('opacity','0');

})

当前导航实现效果

$(document).ready(function(){

$(".productNav>ul>li>a").each(function() {

$this = $(this);

if ($this[0].href == String(window.location)) { //String 对象用于处理文本（字符串）

$this.addClass("aNow");

}

});

})

拨打电话

拨打电话：<a href="tel:18688888888">18688888888</a>，跳到拨号页面

发送短信：<a href="sms:18688888888">18688888888</a>，跳到录入短信信息页面

支持大部分浏览器

补充：

// sms:<phone_number>[,<phone-number>]*[?body=<message_body>]

// eg：<a href="sms:10086?body=余额">查询余额</a>

复制微信号跳转

// 微信号：<span id="target">hlxjq1314</span>

// <button class="btn" data-clipboard-action="copy" data-clipboard-target="#target" id="copy_btn">

// 点击复制

// </button>

$(document).ready(function(){

var clipboard = new Clipboard('#copy_btn');

clipboard.on('success', function(e) {

alert("微信号复制成功",1500);

window.location.href='weixin://';

e.clearSelection();

console.log(e.clearSelection);

});

app跳转

app跳转1

document.getElementById('openApp').onclick = function(e){

if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i))

{

window.location.href = "com.baidu.tieba://";//ios app协议

window.setTimeout(function() {

window.location.href = "https://itunes.apple.com/cn/app/id477927812";

}, 2000)

}

if(navigator.userAgent.match(/android/i))

{

window.location.href = "com.baidu.tieba://app";//android app协议

window.setTimeout(function() {

window.location.href = "https://****.apk";//android 下载地址

}, 2000)

}

};

app跳转2

document.getElementById('openApp').onclick = function(e){

// 通过iframe的方式试图打开APP，如果能正常打开，会直接切换到APP，并自动阻止js其他行为

var ifr = document.createElement('iframe');

ifr.src = 'com.baidu.tieba://';//打开app的协议，有app同事提供

ifr.style.display = 'none';

document.body.appendChild(ifr);

window.setTimeout(function(){

document.body.removeChild(ifr);

　　　　　　　window.location.href = "https://itunes.apple.com/cn/app/id477927812";//打开app下载地址，有app同事提供

},2000)

app跳转3

document.getElementById('openApp').onclick = function(e){

window.location.href = "com.baidu.tieba://";

window.setTimeout(function(){

window.location.href = "https://itunes.apple.com/cn/app/id477927812";//打开app下载地址，有app同事提供

},2000)

};

通过直接获取父级并修改样式

const logisticsContainer = document.querySelector('.Quote-address-c-selected');

// 获取父级的 .quote-item 元素

const quoteItem = logisticsContainer.closest('.quote-item');

// 将高度设置为 auto

if (quoteItem) {

quoteItem.style.height = 'auto';

console.log('父级 .quote-item 的高度已设置为 auto');

}

dush()部署插入使用:把某个元素插入到另一个元素里 var VolumeSelector = document.querySelector(".ReturnWeight"); let scrollContainers = [...document.querySelectorAll(".Quote-right")]; scrollContainers.push(VolumeSelector);