美文网首页
jquery 淡入淡出以及获取slideToggle状态

jquery 淡入淡出以及获取slideToggle状态

作者: Amfishers | 来源:发表于2016-05-03 10:55 被阅读3246次

查了一下w3c资料

jQuery fadeIn(); 用于淡入已隐藏的元素。
jQuery fadeOut(); 用于淡出可见元素。
jQuery fadeToggle(); 可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
jQuery fadeTo(); 允许渐变为给定的不透明度(值介于 0 与 1 之间)。

都归于jQuery 效果 - 淡入淡出一类。可以看出这四个效果的实质是显示与隐藏,只不过展示的效果不同罢了。

所以这里就容易判断slideToggle的状态了(类Join为触发块,类fisher为隐藏块):

//第一种,通过toggle来实现的,注意jQuery版本要是1.9之前的
$(".Join").toggle(function(){
    $(".fisher").slideToggle();
    alert("显示内容")
},function(){
    $(".fisher").slideToggle();
    alert("隐藏内容");
});
//第二种写法,用if语句判断显示或者隐藏,提示一下这里的"visible"不可替换为"show"
$(".Join").click(function(){
    $(".fisher").slideToggle(function(){
        if($(this).is(":visible")){
            alert("显示内容");
        }else{
            alert("隐藏内容");
        }
    });
}); 
//第三种,使用JavaScript的条件运算符
$(".Join").click(function(){
    $(".fisher").slideToggle(function(){
       $(".Join").text( $(this).is(":visible") ? "显示内容" : "隐藏内容" );
    });
}); 

参考:

W3chool
百度知道

相关文章

  • jquery 淡入淡出以及获取slideToggle状态

    查了一下w3c资料 都归于jQuery 效果 - 淡入淡出一类。可以看出这四个效果的实质是显示与隐藏,只不过展示的...

  • 2019-04-10

    jquery 特殊效果 slideup 上展 slidedown下展 slideToggle 切换 jquery ...

  • jQuery 效果

    目录 jQuery 隐藏/显示jQuery 淡入淡出jQuery 滑动jQuery 动画jQuery Callba...

  • jQuery效果总结

    隐藏/显示jQuery hide()和show(): jQuery toggle(): 淡入淡出fadeIn()、...

  • jQuery中淡出淡入 效果

    jQuery 效果 -淡入淡出 jQuery Fading 方法 jQuery 拥有下面四种 fade 方法: f...

  • jQ随手笔记

    随手记录一些小知识点 1.问题:js使用slideToggle如何获取当前隐藏或者开启状态 解决方法: 2.js阻...

  • js/jQuery中获取table里边checkbox的选中状态

    js/jquery中获取table里边checkbox的选中状态以及选中该行的其他列数据如下是在js中通过DOM方...

  • jQuery淡入淡出

    通过 jQuery,您可以实现元素的淡入淡出效果。 jQuery 拥有下面四种 fade 方法:fadeIn()f...

  • jQuery |淡入淡出

    通过 jQuery,您可以实现元素的淡入淡出效果。 jQuery 拥有下面四种 fade 方法:fadeIn()f...

  • jQuery 淡入淡出

    通过 jQuery,您可以实现元素的淡入淡出效果。 jQuery fadeIn() 用于淡入已隐藏的元素。 1.先...

网友评论

      本文标题:jquery 淡入淡出以及获取slideToggle状态

      本文链接:https://www.haomeiwen.com/subject/hdglrttx.html