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

查了一下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
百度知道

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 通过jQuery,您可以选取(查询,query)HTML元素,并对它们执行“操作”(actions)。 jQuer...
    枇杷树8824阅读 739评论 0 3
  • 请记得在进行JQuery类库的运用时,加入JQuery类库,并且要保证先写文档就绪函数 $(document).r...
    Sunshinemm阅读 3,050评论 1 40
  • jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作。由约翰·雷西格(...
    静候那一米阳光阅读 940评论 0 18
  • jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性。...
    阿r阿r阅读 1,286评论 0 4
  • 我们做选择时通常会权衡利弊,然后决策。 今天听到一个理论很有意思: 一个事情如果好处很多,那么肯定有一件足够大的坏...
    有鱼上上签阅读 480评论 1 0

友情链接更多精彩内容