Jquery中的常用方法二（特效）

Jquery中的常用方法（特效）

一.Jquery常用的特效方法

1.基本特效：
显示隐藏的匹配元素show()
隐藏显示的元素hide()
切换元素的显示与隐藏状态toggle(),如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。

    $('.hied').on('click',function(){
        $('.img1').hied(4000);
    });
    $('.show').on('click',function(){
        $('.img1').show(4000);
    });
    $('.tog').on('click',function(){
        $('.img1').toggle(4000);
    });

2.滑动特效：
以滑动方式显示隐藏的元素：slideDown()
可以使匹配的元素以“滑动”的方式隐藏起来slideUp()
可以使匹配的元素以“滑动”的方式隐藏或显示。slideToggle(),如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。

    $('.hied').on('click',function(){
        $('.img1').slideUp(4000);
    });
    $('.show').on('click',function(){
        $('.img1').slideDown(4000);
    });
    $('.tog').on('click',function(){
        $('.img1').slideToggle(4000);
    });

3.淡入淡出特效：
实现所有匹配元素的淡入效果：fadeIn()
实现所有匹配元素的淡出效果：fadeOut()
可以使匹配的元素以“滑动”的方式隐藏或显示。slideToggle(),如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。

   //渐变特效
   //渐变隐藏   
   $('#hide').click(function(){
        $('#box').fadeOut(4000);
   })
   $('#show').click(function(){
        $('#box').fadeIn(4000);
   })
   //切换  隐藏和显示中切换
   $('#tog').click(function(){
        $('#box').fadeToggle(4000);
   })

4.自定义特效：animate（）用于创建自定义动画的函数，
这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.
而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。

// 在一个动画中同时应用三种类型的效果
   $("#go").click(function(){
   $("#block").animate({ 
      width: "90%",
      height: "100%", 
      fontSize: "10em", 
      borderWidth: 10
  }, 1000 );
});

喜欢小编的可以关注点一点。

小编虽然不能陪你一生，但能让你的基础知识满满登登。