jquery-magic-wand / script.js
tatht's picture
gen ra giao diện dùng jquery template đơn giản
55a09ba verified
$(document).ready(function() {
// Fade effect
$("#fadeBtn").click(function() {
$("#demoBox").fadeOut(500).fadeIn(500);
$("#box1, #box2, #box3").fadeToggle(800);
});
// Slide effect
$("#slideBtn").click(function() {
$("#box1").slideUp(400).slideDown(400);
$("#box2").slideToggle(600);
$("#box3").animate({
width: "toggle",
height: "toggle"
}, 600);
});
// Animation effect
$("#animateBtn").click(function() {
$("#demoBox").toggleClass("animated-box");
$("#box1").animate({left: '+=50'}, 300);
$("#box2").animate({top: '+=30'}, 300).animate({top: '-=30'}, 300);
$("#box3").animate({width: '100px'}, 300).animate({width: '80px'}, 300);
});
// Add hover effects
$("button").hover(
function() {
$(this).css('transform', 'translateY(-2px)');
},
function() {
$(this).css('transform', 'translateY(0)');
}
);
});