jquery特效代码

以下是一些实用的jQuery特效代码示例，涵盖常见动画、交互效果和UI增强功能：

平滑滚动到页面顶部

$('a[href="#top"]').click(function(){
    $('html, body').animate({scrollTop: 0}, 800);
    return false;
});

元素淡入淡出切换

$('#toggleButton').click(function(){
    $('#targetElement').fadeToggle(500);
});

悬停时放大图片

$('.zoomable-img').hover(
    function(){ $(this).animate({width: '+=20%', height: '+=20%'}, 200); },
    function(){ $(this).animate({width: '-=20%', height: '-=20%'}, 200); }
);

动态加载内容

$('#loadContent').click(function(){
    $('#container').load('external.html #specific-section');
});

手风琴菜单效果

$('.accordion-header').click(function(){
    $(this).next('.accordion-content').slideToggle();
    $(this).toggleClass('active');
});

表单输入高亮

$('input[type="text"]').focus(function(){
    $(this).css('border-color', '#3498db');
}).blur(function(){
    $(this).css('border-color', '#ccc');
});

元素跟随鼠标移动

$(document).mousemove(function(e){
    $('#floating-element').css({
        left: e.pageX + 20,
        top: e.pageY + 20
    });
});

无限滚动加载

$(window).scroll(function(){
    if($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
        // 加载更多内容的逻辑
    }
});

工具提示效果

$('.tooltip-trigger').hover(
    function(){ $(this).append('<div class="tooltip">提示内容</div>'); },
    function(){ $(this).find('.tooltip').remove(); }
);

拖拽排序列表

$('#sortable-list').sortable({
    axis: 'y',
    opacity: 0.6,
    update: function(event, ui){
        // 排序更新后的回调
    }
});

使用时需确保已引入jQuery库，部分效果可能需要jQuery UI插件支持。可以根据实际需求调整参数值如动画时长、距离等。