พื้นฐานการใช้งาน jQuery ตอนที่ 4 effect,event,methode

ทำให้เคลื่อนไหว และใส่เอฟเฟค
แสดงและซ่อน ส่วนที่เลือก
$("p").show();
$("p").hide();

หน่วงเวลา และ callback
$("p").hide(2000,function(){
$(this).show(2000)
})

ทำการเลือนภาพ
$("p").fadeOut(2000,function(){
    console.log("Fade Out")
}).fadeIn(2000,function(){
    console.log("Fade In")
});

$("p").fadeTo(2000,0.5,function(){
    console.log("Fade To 50% ")
});



ทำการเลื่อนภาพ
$("p").slideUp(2000,function(){
    console.log("Hidden")
}).slideDown(1000,function(){
    console.log("Show")
});

$("p").slideToggle("slow",function(){  /* เลื่อนสลับอัตโนมัติ */
    console.log("Toggled")
});

ทำการเคลื่อนไหวตามลำดับ
$("span").css({
    "background": "gold",
    "border":"5px solid red"
}).animate({
    "width":"480px",
    "height":"320px"
},5000,"swing",function(){
    console.log("Animation !!")
})

เขียนอีกแบบ
$("span").css({
    "background": "gold",
    "border":"5px solid red"
}).animate({
    "width":"480px",
    "height":"320px"
},
    {
    "duration":5000,
    "easing":"swing",
    "complete":function(){
    console.log("Animation !!");
    }
});

หน่วงเวลา
$("p").hide(2000).delay(2000).show(500);

หยุดการทำเคลื่อนไหว
var count = 0;
$("span").css({
    "background": "gold",
    "border":"5px solid red"
}).animate({
    "width":"480px",
    "height":"320px"
},
    {
    "duration":5000,
    "step":function(){
        if(count==200 )
        {
            $(this).stop(true,ture);
            console.log("Stop");
        }else{console.log(count);count++}
    }
});

การจัดการกับเหตุการณ์(Event)ที่เกิดขึ้น
Browser Events
เมื่อเกิด error
$("<img />",{
    "src":"background.png",     /* ถ้าภาพไม่มี error ทำงาน */
    "alt":"Background Image"
}).error(function(){
    console.log("This image does not exist");
}).appendTo("body");

เมื่อเลื่อนหน้า(Scroll)เว็บ
ทำการผูกแมธอดที่จะทำงานเมื่อเลื่อนหน้าเว็บ
$(window).scroll(function(){
    console.log("The window was scrolled!");
})
สั่งให้เกิดการทำงาน
$(window).scroll();

จัดการเหตุการณ์เมื่อมีการโหลดหน้าเว็บ
เมื่อโหลดหน้าเว็บเสร็จสิ้นแล้ว
$(document).ready(function(){
    //All jQuery functionality here
});

เพื่อให้แน่ใจว่าจะให้ $ ได้อย่างแน่นอน
jQuery.ready(function($){
    //All jQuery functionality here
});
หรือตัวแทนใดๆ (alias)
jQuery(document).ready(function(XXX){
    //All jQuery functionality here
    XXX.( "#p1").click(function(){console.log("Clicked!")});
});
ใช้ jQuery แทน .ready()
jQuery(function($){
    //action to perform after the DOM is ready
});

เหตุการณ์เมื่อมีการออกจากหน้าเดิม เช่น คลิกลิงค์ โหลดหน้าใหม่ กดปุ่ม back forward หรือปิดหน้าเว็บ
$("<a>",{"href":"http://be2art.blogspot.com",
        "text":"goto Be2art"}).appendTo("#p3");
$(window).unload(function(){
    alert("Good Bye");
});
*แมธอดนี้ไม่ได้ทดสอบว่าสามารถทำงานได้ในทุกเบราเซอร์ เวลาใช้ควรทดสอบก่อน

การผูกแมธอด
จัดการกับเหตุการณ์อื่นๆ blur focus focusin focusout load resize scroll unload click dbclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error ผ่านการผูกแมธอด bind และยกเลิกการผูกแมธอด unbind
$("span.blue").bind("click",function(){
    console.log("Clicked!!");
});
$("span.blue").bind("click mouseover",function(){ //ทีละหลายเหตุการณ์
    console.log("Clicked!!");
});
ผ่านค่า
var question = "What is your pet ?";
$("#p1").bind("click",{q:question},function(event){
    console.log(event.data.q);
});
var question = "What is your hobby ?";
$("#p2").bind("click",{q:question},function(event){
    console.log(event.data.q);
});
กรณีต้องการผูกส่วนที่เลือก ให้รองรับกับหลายเหตุการณ์
$("span:last").bind({
    "click":function(){
        console.log("Click!");
    },
    "mouseover":function(){
        console.log("MouseOver!");
    }});

เมื่อต้องยกเลิกการผูกแมธอด unbind
ยกเลิกการผูกแมธอด ทั้งหมด
$("#p1").unbind();
ยกเลิกการผูกแมธอดที่เลือก
$("#p1").unbind("click");
ใช้วิธีสลับแมธอด
var func1 = function(){
    console.log("An event was triggered!");
    },
    func2 = function(){
    console.log("Another handler!");
    };
$("#p1")
    .bind("click",func1) //ผูกแมธอด
    .bind("click",func2)
    .trigger("click") //fire the event once
    .unbind("click",func1);

การผูกแมธอดโดยใช้ live(), die()
มีข้อแตกต่างคือการใช้ live() ต้องมีส่วนที่เลือก หรือ tag อยู่ก่อนที่จะผูก แต่ bind() ประกาศไว้ก่อนได้ และเมื่อใช้ live() ต้องใช้ die() เพื่อยกเลิก เหมือนกันกับถ้าใช้ bind() ก็ต้องยกเลิกด้วย unbind()

ผูกแมธอดเพื่อใช้เพียงครั้งเดียว
$("#p1").one("click",function(){console.log("Only Fire Once ");});
ใช้ toggle() เป็นทางเลือกในการผูกแมธอดทีละหลายแมธอดกับส่วนที่เลือก โดยมีใช้การคลิกเป็นตัวกระตุ้น
$("#p1").toggle(
    function(){
        console.log("Number 1");
    },
    function(){
        console.log("Number 2");
    },
    function(){
        console.log("Number 3");
    }
);
เมื่อต้องการใช้ คือคลิกเมาส์ แมธอดการทำงานจะทำงานตามลำดับวนไปเรื่อยๆ ถ้าต้องการซ่อน หรือแสดงส่วนที่สามารถเลือกใช้คำสั่ง
$("#p1").toggle();
$("#p1").toggle(2000); //กำหนดหน่วงเวลาเอง
$("#p1").toggle(true); //กำหนดให้แสดง
$("#p1").toggle(false); //กำหนดให้ซ่อน

ใช้ trigger() กระตุ้น
เมื่อต้องการผูกแมธอด (event) เดิมอีกครั้ง แต่มีการทำงานที่ต่างออกไป ให้กับส่วนที่เลือกใหม่ ต้องใช้ trigger() เพื่อกระตุ้น
$("#p1").bind("click",
    function(){
        console.log($(this).text());
    }
);
$("#p1").bind("click",
    function(){
        console.log("Another Function");
    }
);
$("#p1").trigger("click"); 

ผ่านตัวแปรให้ trigger
var note = "I was triggered!";
$("#p1").bind("click",function(event,msg){
    var log = msg || "I was clicked!";
    console.log(log);
})
.trigger("click",[note]);

สามารถใช้งานตรวจจับเหตุการณ์ผ่าน Methode เช่น
.blur() .focus() focusin() .focusout() .load() .resize() .scroll() .unload() .click() .dbclick() .mousedown() .mouseup() .mousemove() .mouseover() .mouseout() .mouseenter() .mouseleave() .change() .select() .submit() .keydown() .keypress() .keyup() .error()