当前位置：首页 > jquery

jquery特效代码

2026-04-08 05:49:06jquery

以下是一些实用的jQuery特效代码示例，涵盖常见动画、交互效果和动态内容操作：

jquery特效代码

淡入淡出效果

$("#element").fadeIn(1000); // 1秒淡入
$("#element").fadeOut(500); // 0.5秒淡出
$("#element").fadeToggle(800); // 切换显示状态

滑动效果

$("#panel").slideDown(); // 向下展开
$("#panel").slideUp(); // 向上收起
$("#panel").slideToggle(300); // 切换滑动状态

动画效果

$("#box").animate({
    left: '250px',
    opacity: '0.5',
    height: '150px'
}, 1000); // 自定义属性动画

点击特效

$(".btn").click(function(){
    $(this).css("background-color", "red")
           .text("Clicked!")
           .animate({width: "200px"}, 500);
});

悬停特效

$(".item").hover(
    function(){ // 鼠标进入
        $(this).addClass("active");
    },
    function(){ // 鼠标离开
        $(this).removeClass("active");
    }
);

滚动监听

$(window).scroll(function(){
    if($(this).scrollTop() > 100){
        $("#back-to-top").fadeIn();
    } else {
        $("#back-to-top").fadeOut();
    }
});

表单验证特效

$("form").submit(function(e){
    if($("#email").val() === ""){
        $("#email").addClass("error")
                  .next(".error-message").show();
        e.preventDefault();
    }
});

动态内容加载

$("#load-content").click(function(){
    $("#container").load("content.html #target-section");
});

拖拽效果

$("#draggable").draggable({
    containment: "parent",
    cursor: "move"
});

图片轮播

let current = 0;
const slides = $(".slide");

function showSlide(n) {
    slides.hide().eq(n).fadeIn(600);
}

$("#next").click(function(){
    current = (current + 1) % slides.length;
    showSlide(current);
});

$("#prev").click(function(){
    current = (current - 1 + slides.length) % slides.length;
    showSlide(current);
});

这些代码可直接嵌入项目使用，需确保已引入jQuery库。多数效果可通过调整参数（如持续时间、缓动函数）实现不同视觉表现。