<body>
<div>
<ul>
<li class="li" >1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div class="div">
<div class="a">1</div>
<div class="a">2</div>
<div class="a">3</div>
</div>
</body>
<script src="./jquery-3.4.1.js"></script>
<script>
$('ul li').mouseover(function(){
//鼠标放到这个元素 添加class名,同时他的同级元素删除class名
$(this).addClass('li').siblings().removeClass('li');
//eq是鼠标放的元素的索引通过li标签的索引来知道是放在第几个元素上
$('.div div').eq($(this).index()).removeClass('a').siblings().addClass('a'). mouseout(function(){
$('.div div').addClass('a')
});
// console.log($(this).index())
})
-------------------------------------------------------------------------------------------------------------
$('#but').click(function(){
// 元素隐藏
// $('#div').hide();
//元素显示
// $('#div').show();
//元素隐藏与显示的切换
// $('#div').toggle();
//元素的淡入
// $('#div').fadeIn(2000);
//元素的淡出
// $('#div').fadeOut(2000);
//元素淡入淡出的切换
// $('#div').fadeToggle(2000);
// 向下滑动
// $('#div').slideDown(2000);
// 向上滑动
// $('#div').slideUp(2000);
//上下滑动切换
// $('#div').slideToggle(2000);
// 动画
只能是数字的属性才可以实现动画
// $('#div').animate({
// '600px',
// height:'600px'
5000是动做的时间 后面的函数是在动画执行完后执行
// },5000,function(){
// alert('结束')
// })
})