jQuery Effects

jQuery Fade

jQuery 2016

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").fadeIn(); //Hiển thị ngay
        $("#div2").fadeIn("slow"); //Hiển thị chậm
        $("#div3").fadeIn(3000); //Hiển thị theo time
    });
});
</script>
//Click button hiển thị #div1 #div2 #div3 bằng fadeIn

<button>Click to fade in boxes</button><br><br>

<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

Run demo

//Click button biến mất #div1 #div2 #div3 bằng fadeOut
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").fadeOut();
        $("#div2").fadeOut("slow");
        $("#div3").fadeOut(3000);
    });
});
</script>

Run demo

//Click button làm mờ #div1 #div2 #div3 bằng fadeTo
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").fadeTo("slow", 0.15);
        $("#div2").fadeTo("slow", 0.4);
        $("#div3").fadeTo("slow", 0.7);
    });
});
</script>

Run demo

//Click button hiển thị và biến mất #div1 #div2 #div3 bằng fadeToggle
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").fadeToggle();
        $("#div2").fadeToggle("slow");
        $("#div3").fadeToggle(3000);
    });
});
</script>

Run demo

jQuery Slide

jQuery  2016

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideDown("slow");
    });
});
</script>
 
<style>
#panel, #flip {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
}

#panel {
    padding: 50px;
    display: none;
}
</style>
//Click #flip mở slide #panel chậm dần 

<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>

Run demo

<script>
$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideUp("slow");
    });
});
</script>
//Click #flip đóng slide #panel chậm dần 

Run demo

<script>
$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideToggle("slow");
    });
});
</script>
//Click #flip đóng mở slide #panel chậm dần 

Run demo

jQuery Animate

jQuery  2016

//Click button tự động di chuyển div sang trái 250px

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("div").animate({left: '250px'}); //Tùy biến thêm được css cho div
    });
});
</script>

<button>Start Animation</button>

<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

Run demo

//Click button đóng or mở div 

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("div").animate({
            height: 'toggle'
        });
    });
});
</script>

Run demo

//Click button div di chuyển theo css và tốc độ slow

<script>
$(document).ready(function(){
    $("button").click(function(){
        var div = $("div");
        div.animate({height: '300px', opacity: '0.4'}, "slow");
        div.animate({width: '300px', opacity: '0.8'}, "slow");
        div.animate({height: '100px', opacity: '0.4'}, "slow");
        div.animate({width: '100px', opacity: '0.8'}, "slow");
    });
});
</script>

Run demo

jQuery Stop

jQuery  2016

//Click button #start #stop #stop2 #stop3

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){

    $("#start").click(function(){
        $("div").animate({left: '100px'}, 5000);
        $("div").animate({fontSize: '3em'}, 5000); //Start
    });
  
    $("#stop").click(function(){
        $("div").stop(); //Stop div 1
    });

    $("#stop2").click(function(){
        $("div").stop(true); //Stop div 1 và 2
    });

    $("#stop3").click(function(){
        $("div").stop(true, true); //Stop css về trạng thái cuối
    });
});
</script>

<button id="start">Start</button>
<button id="stop">Stop</button>
<button id="stop2">Stop all</button>
<button id="stop3">Stop but finish</button>

<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>

Run demo

//Click #flip thì #panel mở xuống
//Click #stop thì #panel dừng chạy slideDown

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideDown(5000);
    });
    $("#stop").click(function(){
        $("#panel").stop();
    });
});
</script>
 
<style>
#panel, #flip {
    padding: 5px;
    font-size: 18px;
    text-align: center;
    background-color: #555;
    color: white;
    border: solid 1px #666;
    border-radius: 3px;
}

#panel {
    padding: 50px;
    display: none;
}
</style>
 
<button id="stop">Stop sliding</button>

<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>

Run demo

jQuery Callback

jQuery  2016

//Click button ẩn thẻ <p> xong và thông báo dialog

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").hide("slow", function(){
            alert("The paragraph is now hidden");
        });
    });
});
</script>

<button>Hide</button>

<p>This is a paragraph with little content.</p>

Run demo

//Click button thông báo dialog và ẩn thẻ <p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").hide(1000);
        alert("The paragraph is now hidden");
    });
});
</script>

<button>Hide</button>

<p>This is a paragraph with little content.</p>

Run demo

jQuery Chaining

jQuery  2016

//Click button ẩn thẻ <p1> 2000s và hiển thị <p1> 2000s 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#p1").css("color", "red").slideUp(2000).slideDown(2000);
    });
});
</script>

<p id="p1">jQuery is fun!!</p>

<button>Click me</button>

Run demo