jQuery-动态效果

版权声明：本文为原创文章，部分内容可能来源网络，如有侵权请联系博主，未经博主允许不得转载。 https://blog.csdn.net/qq_16546829/article/details/82832469

显示-隐藏与切换

动画的显示show()

$("button").eq(0).click(function () {
    // $("div").css("display", "block");
    // 注意: 这里的时间是毫秒
    $("div").show(1000, function () {
        // 作用: 动画执行完毕之后调用
        alert("显示动画执行完毕");
    });
});

动画隐藏hide()

$("button").eq(1).click(function () {
    // $("div").css("display", "none");
    $("div").hide(1000, function () {
        alert("隐藏动画执行完毕");
    });
});

动画切换toggle()

$("button").eq(2).click(function () {
    $("div").toggle(1000, function () {
        alert("切换动画执行完毕");
    });
});

神奇的对联示例

• scroll()
• scrollTop()

  // 1.监听网页的滚动
$(window).scroll(function () {
     // 1.1获取网页滚动的偏移位
     var offset = $("html,body").scrollTop();
     // 1.2判断网页是否滚动到了指定的位置
     if(offset >= 500){
         // 1.3显示广告
         $("img").show(1000);
     }else{
         // 1.4隐藏广告
         $("img").hide(1000);
     }
 });

展开-收起与切换

• slideDown()
• slideUp()
• slideToggle()

 $("button").eq(0).click(function () {
    $("div").slideDown(1000, function () {
        alert("展开完毕");
    });
});
$("button").eq(1).click(function () {
    $("div").slideUp(1000, function () {
        alert("收起完毕");
    });
});
$("button").eq(2).click(function () {
    $("div").slideToggle(1000, function () {
        alert("收起完毕");
    });
});

折叠菜单-下拉菜单

折叠菜单

• slideDown()
• siblings()
• slideUp()

$(function () {
 // 1.监听一级菜单的点击事件
 	$(".nav>li").click(function () {
     // 1.1拿到二级菜单
     var $sub = $(this).children(".sub");
     // 1.2让二级菜单展开
     $sub.slideDown(1000);
     // 1.3拿到所有非当前的二级菜单
     var otherSub = $(this).siblings().children(".sub");
     // 1.4让所有非当前的二级菜单收起
     otherSub.slideUp(1000);
     // 1.5让被点击的一级菜单箭头旋转
     $(this).addClass("current");
     // 1.6让所有非被点击的一级菜单箭头还原
     $(this).siblings().removeClass("current");
 });
});

下拉菜单

/*
技巧总结：在jQuery中如果需要执行动画, 建议在执行动画之前先调用stop方法,
然后再执行动画
            */
// 1.监听一级菜单的移入事件
$(".nav>li").mouseenter(function () {
    // 1.1拿到二级菜单
    var $sub = $(this).children(".sub");
    // 停止当前正在运行的动画：
    $sub.stop();
    // 1.2让二级菜单展开
    $sub.slideDown(1000);
});
// 2.监听一级菜单的移出事件
$(".nav>li").mouseleave(function () {
    // 1.1拿到二级菜单
    var $sub = $(this).children(".sub");
    // 停止当前正在运行的动画：
    $sub.stop();
    // 1.2让二级菜单收起
    $sub.slideUp(1000);
});

淡入淡出-弹窗广告

淡入淡出

• fadeIn()
• fadeOut()
• fadeToggle()
• fadeTo()

// 编写jQuery相关代码
$("button").eq(0).click(function () {
    $("div").fadeIn(1000, function () {
        alert("淡入完毕");
    });
});
$("button").eq(1).click(function () {
    $("div").fadeOut(1000, function () {
        alert("淡出完毕");
    });
});
$("button").eq(2).click(function () {
    $("div").fadeToggle(1000, function () {
        alert("切换完毕");
    });
});
$("button").eq(3).click(function () {
    $("div").fadeTo(1000, 0.2, function () {
        alert("淡入完毕");
    })
});

弹窗广告

// 1.监听span的点击事件
$("span").click(function () {
    $(".ad").remove();
});

// 2.执行广告动画
/*
$(".ad").slideDown(1000, function () {
    $(".ad").fadeOut(1000, function () {
        $(".ad").fadeIn(1000);
    });
});
*/
$(".ad").stop().slideDown(1000).fadeOut(1000).fadeIn(1000);

自定义动画

animate(）

$("button").eq(0).click(function () {
    /*
    $(".one").animate({
        width: 500
    }, 1000, function () {
        alert("自定义动画执行完毕");
    });
    */
    $(".one").animate({
        marginLeft: 500
    }, 5000, function () {
        // alert("自定义动画执行完毕");
    });
    /*
    第一个参数: 接收一个对象, 可以在对象中修改属性
    第二个参数: 指定动画时长
    第三个参数: 指定动画节奏, 默认就是swing
    第四个参数: 动画执行完毕之后的回调函数
    */
    $(".two").animate({
        marginLeft: 500
    }, 5000, "linear", function () {
        // alert("自定义动画执行完毕");
    });
})
$("button").eq(1).click(function () {
    $(".one").animate({
        width: "+=100"
    }, 1000, function () {
        alert("自定义动画执行完毕");
    });
});
$("button").eq(2).click(function () {
    $(".one").animate({
        // width: "hide"
        width: "toggle"
    }, 1000, function () {
        alert("自定义动画执行完毕");
    });
})

stop和delay方法

$("button").eq(0).click(function () {
	/*在jQuery的{}中可以同时修改多个属性, 多个属性的动画也会同时执行*/
	/*
	$(".one").animate({
	    width: 500
	    // height: 500
	}, 1000);
	$(".one").animate({
	    height: 500
	}, 1000);
	*/
	/*delay方法的作用就是用于告诉系统延迟时长*/
	/*
	$(".one").animate({
	    width: 500
	    // height: 500
	}, 1000).delay(2000).animate({
	    height: 500
	}, 1000);
	*/
	$(".one").animate({
	    width: 500
	}, 1000);
	$(".one").animate({
	    height: 500
	}, 1000);
	
	$(".one").animate({
	    width: 100
	}, 1000);
	$(".one").animate({
	    height: 100
	}, 1000);
	});
	$("button").eq(1).click(function () {
		// 立即停止当前动画, 继续执行后续的动画
	// $("div").stop();
	// $("div").stop(false);
	// $("div").stop(false, false);
		// 立即停止当前和后续所有的动画
	// $("div").stop(true);
	// $("div").stop(true, false);
		// 立即完成当前的, 继续执行后续动画
	// $("div").stop(false, true);
		// 立即完成当前的, 并且停止后续所有的
	$("div").stop(true, true);
	});

图标特效

重点
动态切图
两段动画中间的间隔

// 1.遍历所有的li
$("li").each(function (index, ele) {
     // 1.1生成新的图片位置
     var $url = "url(\"images/bg.png\") no-repeat 0 "+(index * -24)+"px"
     // 1.2设置新的图片位置
     $(this).children("span").css("background", $url);
 });
 // 2.监听li移入事件
 $("li").mouseenter(function () {
     // 2.1将图标往上移动
     $(this).children("span").animate({
         top: -50
     }, 1000, function () {
         // 2.2将图片往下移动
         $(this).css("top", "50px");
         // 2.3将图片复位
         $(this).animate({
             top: 0
         }, 1000);
     });
 });

无线循环滚动的轮播图

重点

• 轮播4张图 为了给出无限循环的错觉 需要拼接6张，123412
• 蒙层效果采用淡出函数fadeto()函数淡出程度0.5的效果

// 0.定义变量保存偏移位
var offset = 0;
// 1.让图片滚动起来
var timer;
function autoPlay(){
    timer = setInterval(function () {
        offset += -10;
        if(offset <= -1200){
            offset = 0;
        }
        $("ul").css("marginLeft", offset);
    }, 50);
}
autoPlay();

// 2.监听li的移入和移出事件
$("li").hover(function () {
    // 停止滚动
    clearInterval(timer);
    // 给非当前选中添加蒙版
    $(this).siblings().fadeTo(100, 0.5);
    // 去除当前选中的蒙版
    $(this).fadeTo(100, 1);
}, function () {
    // 继续滚动
    autoPlay();
    // 去除所有的蒙版
    $("li").fadeTo(100, 1);
});