jquery中的事件与动画

by admin on 2019年4月10日

一:事件

一.鼠标事件

 图片 1

eg:光棒效果

 $(function () {
            $('li').mouseover(function () { //鼠标移过时
                $(this).css('background','blue');
            }).mouseout(function () {  //鼠标移过后
                $(this).css('background','');
            });

        });

贰.键盘事件

图片 2

叁.表单事件

图片 3

 eg:输入框的文字展现效果

        // 查询输入框
        $("input[name='search']").focus(function(){
            $(this).val(""); 
        });
        $("input[name='search']").blur(function(){
            $(this).val("请输入要查询的问题");    
        });    

四.绑定事件与移除事件

 bind():绑定事件

  0壹.绑定一个

$("input[name=event_1]").bind("click",function() {
    $("p").css("background-color","#F30");
});

  02.绑定八个

$("input[name=event_1]").bind({
mouseover: function () {
    $("ul").css("display", "none");
},
mouseout: function () {
    $("ul").css("display", "block");
}
});

 unbind([type],[fn]):移除事件

图片 4

 

 当unbind()不带参数时,表示移除所绑定的总体轩然大波

5.复合事件

 1.hover()方法 

 
hover()方法约等于mouseover与mouseout事件的整合,用于模拟鼠标指针悬停事件

$("#myaccound").hover(function(){
        $("#menu_1").css("display","block");
     },
     function(){
        $("#menu_1").css("display","none");
     }
);

        图片 5

 二.toggle()方法 (在j
一.柒后就删除,不建议选择)

  toggle()方法用于模拟鼠标三番五次click事件

$("body").toggle(
function () { }, //第一次点击触发
function () { }, //第二次点击触发
function () { } //第三次点击触发
...                   //...
);

  同时toggle()方法还有三个成效:切换来分可知状态

 $('input').toggle(   
      function () {
        $('ul').toggle(); //是显示的则隐藏,是隐藏的则显示
       },
      function () {
         $('ul').toggle(); //是显示的则隐藏,是隐藏的则显示
       }
  );

二:动画

一.出示及隐藏成分

  show() 在展现成分时,能定义展现成分时的效果,如出示速度

$(".tipsbox").show("slow");//以较慢的速度显示元素

hide() 隐藏成分

$(".tipsbox").hide("slow");//以较慢的速度隐藏元素

此间补充八个is()方法的利用,能够用来判定是突显依然隐藏。

eg:

 $('input').bind('click', function () {
                if ($(this).is(':visible')) {//如果内容为显示
                    $(this).hide();
                } else {
                    $(this).show();
                }
            })

贰.切换来分可知状态(toggle())

 toggle()除了能够效仿鼠标的总是单击事件外,还是能够用于切换元素的可知状态

$("li:gt(5):not(:last)").toggle();//是隐藏则显示,是显示则隐藏

3.淡入淡出效果

fadeIn()和fadeOut()能够透过改动成分的光滑度完成淡入淡出效果

$("input[name=fadein_btn]").click(function(){
        $("img").fadeIn("slow"); //以较慢的速度淡入

});
$("input[name=fadeout_btn]").click(function(){
        $("img").fadeOut(1000);  //以1000毫秒的速度淡出

});

肆.改成成分的可观

slideDown() 能够使成分日渐延伸呈现,slideUp()则使成分日渐收缩直至隐藏

$("h2").click(function(){
        $(".txt").slideUp("slow");
        $(".txt").slideDown("slow");
});

 3:自定义动画

 详情请推荐大咖博客:http://blog.csdn.net/huileiforever/article/details/45076469

 你早晚会具备收获的!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图